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INSTRUCTOR NOTES 


Getting Started 


The Adobe’ Fireworks? CS6 Classroom in a Book’ course presents students with 
tips, techniques, and solutions for using the Adobe Fireworks CS6 software. 


The Instructor Notes are intended to complement the information in the Adobe 
Fireworks CS6 Classroom in a Book’. The information is organized to follow the 
sequence of instruction in each lesson. These notes are not a play-by-play of each 
subsection of the book; rather, they point out specific areas where we feel you can 
expand on the lesson, or perhaps introduce tangential subjects that may not be 
covered in the text. 


The CS6 edition has been almost entirely rewritten. Virtually every lesson through- 
out the book contains new artwork, and several new exercises spotlight the new 
features in Fireworks CS6. 


Course strategy 


If you're teaching a 15-session class, you can teach approximately one chapter of 
this book per class. The book contains 14 lessons, some of which may take a while 
to complete. If you are teaching a 10-session class, you may want to combine some 
of the lessons in a single class. For example: 


e Lesson 1 is focused on learning about the Fireworks user interface. 


e Lesson 2 covers the Pages, States, and Layers panels in detail. These are very 
important panels in Fireworks and crucial to almost all but the most basic work 
in Fireworks. Some fairly advanced techniques, such as importing pages and 
sharing layers, are introduced in this lesson. 


e Lessons 3 and 4 cover related aspects of photo retouching and bitmap 
selections. Many basic retouching issues can be handled within Fireworks, 
without the need to switch to another bitmap editor like Photoshop. 


e Lesson 5 is about working with and creating vector objects. Also, Lesson 6 
covers effects that are based on masking using both vector objects and bitmap 
selections. Lesson 7 focuses on working with text. 


e Lesson 8 is a new chapter, when compared with previous editions, and focuses 
on working with styles and the Styles panel. Styles are a powerful but often 
overlooked feature of Fireworks. Working with styles can improve productivity, 
because you can apply a series of preset effects for text, vectors, and, to some 
extent, even bitmap images. You can then save that same series as a style and 
use it as often as you want without having to rebuild—or match—the complex 
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effect from scratch. Typically styles are applied to vector objects or text, so this 
lesson could tie in nicely with Lessons 5 through 7. 


e Lesson 9 covers the various types of symbols you can create within Fireworks, 
with special focus on graphic and button symbols. Symbols can save you time 
and file size, because you can use them over and over again within a file. Also, 
editing symbols affects all children (instances) of a symbol that are in a design. 
Animation symbols are discussed, but this edition contains no specific exercises 
on them. 


e Lesson 10 is an in-depth introduction to creating web objects, optimizing 
images for web use, and exporting files for use in HTML-based prototypes. 
Exporting a single page as a standards-based CSS/HTML layout is also covered 
in this lesson. Of most importance, we feel, are two of the three main new 
features added to Fireworks CS6: the ability to export CSS Sprites and the 
ability to easily extract CSS3 properties from text or vector objects. These two 
features and the jQuery Mobile template covered in a later lesson really help 
to revitalize Fireworks as a tool for contemporary web designers. 


e Lessons 11 and 12 are focused on creating interactive prototypes. Lesson 
11 covers the important workflow of creating wireframe mock-ups and ends 
with the student exporting a wireframe as an interactive PDF file. The example 
wireframe used is for a tablet application, again demonstrating current trends 
and workflows. Definitely cover Lesson 10 before moving to these lessons, as 
web objects are used in both Lessons 11 and 12. 


e Lessons 13 and 14 take the student beyond the basic functionality of Fireworks 
and cover such topics as using Adobe Bridge, using batch processing, adding 
metadata to files, and working with other applications such as Photoshop, 
Dreamweaver, InDesign, Muse, and Edge. Lesson 14 also covers another 
new Fireworks CS6 feature: the jQuery Mobile template. Much like the CSS 
Properties panel, this tool gives visual designers the opportunity to create 
custom jQuery mobile themes in a visual manner, and then export the 
appropriate CSS and sprite images for use in Dreamweaver. 


Enhanced and new features 


Lesson 1—The Properties panel has received several enhancements, making 
workflow smoother and faster by allowing you to select Fill and Stroke type (no fill, 
solid, gradient, or pattern fill) using icons within the main Properties panel. The 
Color Picker has also been updated with a new set of swatches as well as the ability 
to easily set HEX or RGB color values. While not mentioned specifically in this 
lesson, Fireworks now supports RGBA color values, which is great for CSS effects. 
You can set fill and stroke opacity right in the Color Picker. 


Fireworks now saves native Fireworks PNG files with a .fw extension, in order to 
differentiate Fireworks PNG files from standard, flat PNG files. This .fw extension 
is optional but has been requested many times by web designers. 


While not called out in this lesson, the document panel tab has been simplified. 
The tab now displays the document file name only, rather than file name, page 
number, magnification, and selected object. 


Lesson 2—Objects in the Layers panel now sport icons to visually identify the type 
of object. There are icons for vector, text, bitmap, groups, and symbols. These icons 
appear in the lower-right corner of the object’s thumbnail. This feature is not called 
out, so you may want to mention it to students. 


Importing files also has a slightly improved workflow now. When you use the 
Import icon for scaling an object as it is imported, tooltips are now supported 
so that you know what your starting pixel coordinates are. 


Lesson 3—Lock proportions functionality has been enhanced so that it now works 
with the Crop tool. This feature came late in the development cycle so it’s not cov- 
ered in the lesson, but there are opportunities to make use of the feature through- 
out the lesson. Try incorporating this feature when you are cropping a single image 
or even later in the lesson, when the banner image for the website is cropped 
within the page design. 


Lesson 4— While not new, converting a bitmap selection to a path is still a pretty 
cool feature, and it’s used in this lesson to clean up a road sign. Quick access to the 
Stroke type is also used to remove a stroke to a newly created path. 


Lesson 5—In one of this lesson’s exercises, students create and edit custom 
gradients. The Gradient Editor has several enhancements, making the editing of 
gradients easier and more accurate. You can now set the position of color stops and 
change the angle of a gradient within the editor. Also, when selected a color stop is 
now highlighted, making it easier to identify. 


Lesson 7—While it is not covered in the book, you can now copy and paste text 
from Adobe Illustrator directly into Fireworks. In addition, stroke and fill options 
for text have been reintroduced. 


Lesson 8—This is a new lesson. Although the feature itself is not new, four new 
style libraries have been added: Button Symbol Styles, Fill Design Patterns, Stroke 
Color Dots, and Web Button Styles. 


Take the time to explain to students how useful styles can be as a creative launching 
point. Styles are an editable collection of Live Filters and other object properties that 
you can quickly apply to a selected object. Fireworks ships with a large collection of 
16 style libraries (presets), found in the Styles panel. Starting with the presets is the 
first step, but you can customize styles and then share them with others. 
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The other main advantage of styles (custom or preset) is that they can improve 
design consistency; instead of building effects from scratch and then having to 
copy/paste or manually reproduce an effect, you can save the attributes as a style, 
making it fast and easy to create reproducible results for buttons, icons, form 
elements, and the like. 


Lesson 9—While not covered in the lesson, there have been some workflow 
enhancements to symbols. Updating a linked symbol is now available as an icon 
in the Document Library. Objects on the canvas are now retained if you choose 
to save them as symbols to the Common Library, and new symbol libraries have 
been added for gestures, iPhones, and iPads. 


Lesson 10—This lesson introduces two brand new features: the CSS Properties 
panel and the CSS Sprites Export workflow. The CSS Properties panel extracts the 
CSS properties of a selected object and creates CSS markup. 


This panel can prove handy for anyone who is familiar with Fireworks and 
Dreamweaver (or a web-page editor of your choice) and wants to design for 
mobile deployment or to reduce bandwidth on traditional websites. 


CSS sprites are becoming more common in today’s websites. Sprites are a collec- 
tion of graphics placed in a single flat image file, at specific coordinates. The web 
designer then creates a style sheet that references specific X and Y coordinates from 
the bitmap image so that images are displayed as background images. Creating a 
graphic sprite sheet is not too difficult, but writing out all the CSS referencing each 
graphic can be time-consuming. Fireworks not only creates the flattened bitmap 
file, but it also writes out the CSS for you, which can be a real time saver in web 
design and development. 


Lesson 11—Lesson 11 introduces students to the concept of wireframing a website 
or application. Updated for this edition, students are working on a wireframe for a 
tablet application. Using symbols from the new gesture symbol library, spend some 
time helping students learn the importance of indicating touch events in table app 
wireframes. Wireframing is an important step in the development of software, 
websites, and applications. Adobe recognizes this and has included new templates 
and symbol libraries for the iPhone, iPad, and the gesture library. 


This is also a great opportunity to share web search techniques with students. The 
Fireworks design community is a very passionate one, and web searches can result 
in a wealth or professionally designed, third-party symbols, styles, and graphics. 


Lesson 13—This lesson introduces document templates, and while the feature is 
not new, an updated version of the web banners template has been created for CS6. 
There are also several other templates added for CS6, including iPhone and iPad, 
Grid, and Document Preset templates. 


Lesson 14—This lesson introduces students to the other big feature in Fireworks 
CS6: the jQuery Mobile template. The jQuery Mobile Theme command introduces 
an easy-to-use, visual method for reskinning the default swatches and sprites used 
in the jQuery Mobile Framework or creating your own new, custom swatches and 
icons. Fireworks also generates all the associated CSS style sheet and sprite assets 
needed for the new theme. This saves a great deal of time, as you do not need to 
write or edit the CSS markup manually. 


Another big focus of this lesson is Fireworks’ existing integration with Photoshop. 
The ability to open and save PSD files in Fireworks is covered in depth. 


A discussion of how Firework fits in with other Adobe applications, such as 
Dreamweaver, Muse, Edge, and even InDesign, can be found in this lesson as well, 
and should be considered as a jumping-off point for working with other Adobe tools. 


Managing student projects 


One way to simplify file storage and retrieval in classroom situations is to ask stu- 
dents to create a folder on their hard disks, name it /student’s name] Lessons, and 
then copy each project folder into the main Lessons folder. Having students keep all 
their working files in their own Lessons folder makes it easy for you to clean up files 
when a class is over. It’s a good idea to encourage them to save their work to their 
own media as well. 


Lesson 1: Getting to Know the Workspace 


The first lesson presents an introduction to the Adobe Fireworks CS6 software. 


Using the basic commands, tools, and panels, your students will learn general tech- 
niques for using the work area efficiently, obtaining information about the image 

in front of them, and selecting tools or entering values to change the image. This 
lesson also introduces students to the History panel, a valuable tool in undoing and 
stepping backward in their work. 


Take the time to introduce the new features of the Properties panel. While they 
may seem to be minor enhancements, they definitely speed up workflow and in 
some cases (RGBA support) offer features never before available in Fireworks. 


Talk about the differences between Fireworks PNG files and standard, flat PNG 
files. Next, introduce the new default option where Fireworks saves native 
Fireworks PNG files with a .fw.png extension, in order to differentiate Fireworks 
PNG files from standard PNG files. 
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Goals for this lesson 


How much time you should schedule for this lesson depends on whether your 
students already have any knowledge of Fireworks and on their computer skills in 
general. The overall objective for Lesson 1 is to make them sufficiently familiar with 
the user interface so that they can locate the controls they need to do the proce- 
dures in the rest of the lessons. Additionally, by learning how to help themselves, 
students gain confidence and independence. In general, they should be able to do 
the following: 


e Identify and name the key areas of the interface, including the Tools panel, 
panels (in general), document windows, and the Properties panel. 


e Open the main menus and submenus across the top of the work area (File, Edit, 
and so forth), context menus, and panel menus. 


e Access and search Adobe Community Help, which includes the full Fireworks 
CS6 Help, as well as links to other Adobe and third-party Fireworks resources 
online. 


Finding tools in the work area 


You may want to introduce students to the Fireworks environment by providing a 
general tour of the work area. This helps orient the students and provides a review 
of the names of the elements on the screen. For example, you may point out the 
document tab and remind students that it indicates which document is currently 
active. Then point out the menu bar, the rulers, the page icons, the panels, and the 
Tools panel. 


Students may already be used to keyboard shortcuts as a simple alternative to using 
the mouse. Fireworks and other Adobe products allow you to combine keys with 
mouse clicks to perform tasks quickly. 


Many Fireworks professionals keep one hand on the mouse and the other over 

the keyboard to switch tools and modes. You may want to demonstrate how this 
method allows you to keep the pointer directly over the part of the image that 
youre editing. 

Encourage students to use commands at first, so they understand what they’re 
doing and how it relates to the application. As they become more comfortable with 
the tools and concepts, remind them that shortcuts can help them accomplish tasks 
more quickly. 


Using the Application Frame and the Application bar 


By default, the Application bar is enabled and the Application Frame is not. Some 
lessons include steps that use the Application bar, so it’s best for students to leave 
it visible, though they may prefer to hide it when they work on their own. 


If your students are working in Mac OS, suggest that they enable the Application 
Frame to minimize distractions from other applications and items on the desktop. 
If you reset preferences at the beginning of each lesson, you'll need to enable the 
Application Frame each time. 


Viewing designs 


Double-clicking the Zoom tool displays one image pixel for each monitor pixel. 
This magnification displays an image at exactly the same size as it will appear ina 
web browser. But because monitors can be set to different resolutions, the real size 
of an image viewed in Actual Pixels view or in a web browser will vary depending 
on the monitor in use. 


Point out that you can also change magnification of a design by choosing a Zoom 
level in the Application bar or from the Zoom level in the document window at the 
lower-right corner. 


Many users are unaware that the monitor resolution can be changed, so you may 
want to demonstrate this. Increasing the resolution makes more room for panels 
and images on the screen, but with the trade-off of making everything smaller. 


Finally, you may want to demonstrate how to see a single image at two magnifica- 
tions simultaneously. To do so, choose Window > Duplicate Window, and then drag 
the tab of the new window to the left or right side of the document area to show 
both views at the same time. You can zoom into one view to make detailed changes 
while viewing the full image in another window to see the changes in context. 


Using the Properties panel 


Students should understand that the Properties panel is not the same as the toolbar 
(or button bar) found in products such as Microsoft Office. In Fireworks, the 
controls that appear in the Properties panel change depending on the selected tool. 
Similarly, the Properties panel cannot be customized because it always represents 
options for the current tool. Take care to refer to the Properties panel by its com- 
plete name and not as a “toolbar” or “button bar” The old name for this panel was 
Property Inspector. 


Using the History panel 


You can use the History panel simply to undo steps or to automate certain work- 
flows by replaying history steps. Make sure students understand that history states 
aren't saved with the document. You can suggest that if students want to keep 
different versions across sessions, they should set up a design as separate pages or 
documents instead. 


To supplement the information in this section of the book, you can tell students 
about the Save Steps As A Command feature in the History panel menu. This lets 
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the student save a series of history steps as a JavaScript command, which they can 
invoke from the main Commands menu any time they wish. Point out that they 
can use this feature by selecting a series of history steps generated from menu or 
keyboard commands (steps such as moving objects on the canvas with the mouse 
cannot be saved as part of a custom command) and then clicking the Save Steps As 
A Command icon. 


Configuring panels and the panel dock 


The Tab keyboard shortcut lets you hide all panels instantly so that you can quickly 
evaluate designs without distraction. When you're working on a small screen, it 
also lets you use the entire screen to edit images. The Tab key returns the panels 
just as quickly. 


The F key will cycle among different workspace views (Standard view, Full screen 
with menus and panels, and Full screen). In Full screen view, mousing over any of 
the four sides of the workspace will reveal the panels in that area. 


Show students how easy it is to collapse panels to icons, and then expand the pan- 
els again with a click. In this lesson, students will look at customizing a workspace. 
They will define a custom workspace in Fireworks that shows and hides specific 
panels, based on the type of task they are performing. 


You do not need to go into this feature in-depth now, to avoid the risk of informa- 
tion overload in the first lesson. 


Using a context menu 


Although they are not covered as a specific section in this lesson, demonstrate how 
context menus change depending on the content under the pointer. Right-click 
(Windows) or Control-click (Mac) the following examples: 


e Different layers 

e An active object on the canvas 
e Text with an insertion point 

e Any list panel 


If your students use graphics tablets, encourage them to program their stylus 
button to display context menus. 


Using Fireworks Help 


Choosing Help > Fireworks Help opens Adobe Community Help, which includes 
the entire Fireworks Help, as well as links to other online resources. Show students 
that Fireworks Help includes access to a variety of tutorials, both written and in 
video format. 


Using Adobe Online services 


Students may inquire about privacy concerns related to the Adobe Online service. 
You can reassure them that no personal or configuration-related information is 
sent from their computer, except that which they explicitly type in as part of the 
voluntary online registration process. 


Questions 

The following questions are not in the student’s Classroom in a Book. 

1 What do you do if you can’t find a tool that you know exists? 

How can you find the keyboard shortcut for a tool? 

How can you instantly hide or show all panels? 

What are other ways to switch to a specific preset zoom percentage? 

What magnification is the best representation of an image’s size on a web page? 


How do you view multiple documents at the same time? 


vn QA wu & WN 


What is the difference between a panel and a document window? 


Answers 


1 Look in the Tools panel for a related tool with a small black triangle. That 
triangle symbol indicates that holding down the mouse button on that tool 
opens a list of hidden tools at that location. 


2 Hold the pointer over the tool until the tooltip appears containing the keyboard 
shortcut for that tool. 


3 Press the Tab key (when you're not editing text). 


4 Choose the zoom level from the Application bar or from the lower-right corner 
of the document window. 


5 The optimum magnification is 100%. 


6 Undock a document by dragging its tab away from the tab bar. Then drag the 
title bar of the document to any of the four sides of the main document window. 
When a blue highlight appears, release the title bar. 


7 A panel contains a set of related controls that you select and use to work on 
your document. You can have many panels open, group them, hide them, and 
separate them. The document window displays your design. If you close a 
document window, you close that file. 
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Lesson 2: The Pages, States, and Layers 
Panels: Fundamental Workflow Tools 


Pages and layers will be a part of every design a student creates in Fireworks. As 
students start building interactive designs, or animations, states become very 
important as well. 


Throughout this lesson, emphasize the importance of naming pages, layers, sublayers, 
and objects as the students work in Fireworks. It’s tempting to just zoom ahead with 
a design, but if the habit of naming elements can be ingrained early, the students— 
and their associates—will save time down the road, because it will be easier to find 
what they are looking for in a complex document. 


Goals for this lesson 

In this lesson, students will learn how to do the following: 
e Import new pages 

e Create new layers 

e Create sublayers 

e Share layers 

e Change the stacking order of layers 

e Rename layers 

e Protect layers and objects 

e Access layer options 


e Edit content on different states 


About pages, layers, and states 


This section introduces students to these three essential panels and defines their 
functionality and relationship to each other. 


Importing pages 
This section describes for the first time the workflow for importing pages from a 


multipage Fireworks PNG file. The workflow is slightly different for Windows and 
Mac systems. Point out that you can import only one page at a time. 


There is also a brief discussion on Photoshop and multipage Fireworks documents. 
Photoshop doesn’t support this feature, but there is a free extension available that 
will allow users to export a multipage PNG file as separate PSD files. We have not 
received confirmation if this extension will work with CS6, though. 


Creating a Master page 


This section introduces the concept of the Master page and how it can be helpful 
for a prototype. 


Working with layers and objects 


Unlike Photoshop, Fireworks is an object-based application. This means that each 
layer can contain one or more independent objects as well as sublayers. Objects 
can be text, bitmaps, vectors, groups, or symbols. 


Point out that layer hierarchy (layers and sublayers) can help from an organiza- 
tional point of view, but the primary existence of sublayers (at this time, anyway) 
is to maintain integration with Photoshop and its layer groups capabilities. 


A layer containing one or more sublayers becomes a layer group when the design 
is saved in Fireworks as a Photoshop file. Likewise, if a student opens a Photoshop 
file that contains layer groups, Fireworks will recognize and maintain this structure 
using layers and sublayers. 


Point out how easy it is to drag and drop a selected object from one layer into 
another, using the radio button (sometimes called a proxy) on the right side of 
each layer name. 


When this button is dragged from one layer to another, only the selected objects in 
the original layer are moved. Dragging the button works, but you can also just click 
on the empty radio button (or proxy) to move the selected objects. 


Sublayers are helpful from a structural point of view and for integration with 
Photoshop’s layer group feature, but they are also limited in many ways. 


While it is not part of this lesson, you may want to build a simple design ahead 
of time using both layers and sublayers, and briefly show students how the layer 
structure appears if the design were saved as a Photoshop file and then opened in 
Photoshop. 


Sharing layers to pages 


The ability to share layers to pages gives you more control than a Master page can 
offer, along with more flexibility. This technique is worth discussing and demon- 
strating; it can be a real time-saver. 


Working with states 


Point out that states are an important part of Fireworks workflow. They can be used 
for mocking up website interaction (rollovers, Ajax, and jQuery emulation) or to 
show how an application may change based on user input. They can also be used 
for creating simple, frame-based GIF animations (discussed in Lesson 9). 
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Students will duplicate the main state of a smartphone prototype and alter the 


duplicate state to create the tap effects needed for the prototype. Point out that 


Live Filters (already present in the artwork) are always editable, all the time. 


Students can change their minds about the effects, edit them, or even remove 


them. At the end of the lesson, students are encouraged to apply what they’ve 


learned about layers and states to the other pages in the mock-up. 


Questions 


The following questions are not in the student’s Classroom in a Book. 


1 


a uu A W N 


What is the importance of sublayers? 

How do you protect a layer or an object from accidental editing? 
Why is it important to name your pages, layers, states, and objects? 
How do you create a sublayer? 

How do you rename layers, sublayers, or objects? 


How do you import pages from another Fireworks file? 


Answers 


1 


Sublayers help you add structure to your document, allowing you to group 
related objects within an existing layer. If a Photoshop design is opened within 
Fireworks and it contains layer groups, Fireworks maintains this relationship 
using layers and sublayers. 


You can protect all the objects in a layer by locking the layer (click the empty 

square next to the layer name). You can also protect individual objects in a layer 
(rather than all the objects in the layer) by locking them independently. Locking 
a layer will protect all objects, regardless of the lock status of individual objects. 


Naming pages, layers, objects, and states can help other members of your 
design team, because things are easier to locate when they are named. It can 
help you as well, by aiding you in logically structuring the layers and in locating 
a specific object on a specific layer. 


You create a sublayer by first selecting the layer you want to contain the sublayer. 
Then choose New Sublayer from the bottom of the Layers panel or by right- 
clicking (Windows) or Control-clicking (Mac) the main layer and choosing New 
Sublayer from the context menu. 


You can rename any layer, sublayer, or object by double-clicking on the default 
name (Layer 1, for example). 


6 You import specific pages from another Fireworks document by choosing File > 
Import and browsing to a Fireworks document that contains one or more pages. 
Use the Preview window to browse to the page you wish to import and then 
click Insert (Windows) or Open (Mac). If you want the content to be imported 
onto a brand-new page, make sure to choose Insert After Current Page. 


Lesson 3: Working with Bitmap Images 


This lesson introduces students to working with and editing bitmap images. 
Fireworks works equally well with vectors and bitmaps, and becoming aware 
of this flexibility is important to realizing the full potential of Fireworks. 


The basics of opening, importing, cropping, and retouching images will be covered 
in this lesson. 


Goals for this lesson 


With the solid set of bitmap tools in Fireworks, there will be many situations where 
the user can work entirely within Fireworks without having to switch to other 
applications. The overall objective of this lesson is to familiarize students with these 
tools and give them insight into how images can be retouched using bitmap tools 
such as Dodge and Burn or the Rubber Stamp, or in a nondestructive manner using 
Live Filters. 


In this lesson, students will learn how to do the following: 
e Identify and name the key bitmap tools 

e Import images into an existing design 

e Nondestructively alter an image using Live Filters 

e Repair images using the Rubber Stamp 

e Resize images 


In addition, there is an exercise that introduces the new 9-Slice Scaling tool where 
you can show users how to scale certain types of bitmap images in one direc- 

tion with no distortion. This feature was previously available only for symbols in 
Fireworks CS3. 
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Resolution and image size 


Point out the relationship between image resolution and file size and also that 

a high-resolution image does not necessarily mean a high-quality image. Cheap 
digital cameras, poor-quality scans, or highly compressed images can produce a 
high-resolution, yet poor-quality, image. 


Encourage the students to resample images and see what happens to file sizes. 


Cropping an image 


Fireworks can crop an entire design or specific bitmaps within a design. Show how 
to quickly apply the cropping marquee to an entire image by double-clicking on 
the tool. 


Point out that cropping an entire page design or single image file does not have 
to be destructive; you can set cropping preferences within the Preferences panel. 
Cropping a selected bitmap, however, is always destructive. 


Managing images on the canvas 


Complex designs tend to contain multiple images. Point out that guides, tooltips, 
Smart Guides, the Shift and Arrow keys, the Pointer tool, and the Properties panel 
can all be used to help position objects precisely on the canvas. 


Although it is not mentioned in the book, users can also set up a grid to help 
align objects. 


Demonstrate how to activate tooltips and how Smart Guides can help align objects 
to each other or to the canvas. Point out that snapping can be activated for Smart 
Guides, grids, and guides, and that they can adjust the snapping distance in the 
Preferences panel. 


Importing images 
Importing images is an often overlooked but powerful feature. The exercise on 
importing images demonstrates how you can quickly add a file to a currently 


open document, and throughout the book your students will call on the Import 
feature regularly. 


Mentioned in the book is the importance of not scaling an imported bitmap larger 
than its original size. The consequences of scaling images larger than that is dem- 
onstrated in Lesson 9, during the exercise on creating high-resolution symbols. 


Encourage students to import other files to the document and experiment 
with scaling. 


Working with Guides 


Guides are a very useful tool for generating consistent layouts and aligning objects. 
Devote some time to demonstrating how to set up guides and how to place them at 
pixel- precise locations. When you position and import images, by default they will 
snap to the nearest guides on the canvas. 


The 9-Slice Scaling tool is not covered in any depth in this edition, but take the 
time to point out the feature to students. It gives you the ability to scale rectangular 
vectors and certain bitmaps without having to convert them to symbols. 


9-Slice Scaling is effective only on bitmaps with areas that will not be affected by 
scaling in a single direction. A common use would be for scaling bitmap screen 
grabs of interface elements, such as dialog boxes or panels. 


Supply the students with such an image and have them use the 9-Slice Scaling tool 
to alter the image size in a single direction. 


Using the Align panel 


Point out that you can align images to each other whether they are bitmap, vector, 
text, or groups; or you can align them to the canvas. 


Enhancing images 


Photoshop may be the king of bitmap editors, but Fireworks has a wide range of 
features to help you correct bitmap images, including some nondestructive ones. 


Point out that several corrective tools are available in the Live Filters > Adjust Color 
menu, including Auto Levels, Levels, Curves, Brightness/Contrast, and 
Hue/Saturation. 


Live Filters are nondestructive effects you can apply to most objects (vector, bit- 
map, or symbol) within Fireworks. The great power and advantage of Live Filters 
is that you can always edit the effect at a later time. If you feel the filter is too harsh 
or too subtle, just click the “i” icon to edit the filter properties. (Note that this icon 
becomes available once the Live Filter has been added to the Properties panel.) All 
Live Filters remain editable during the current session as well as when the file is 


saved as a Fireworks PNG file. 


Point out that Live Filters must be applied to an entire selected object. To apply 
corrective filters to a specific area of a bitmap, you must first make a bitmap selec- 
tion and then apply the filter from the main Filters menu. Unlike Live Filters, these 
adjustments permanently alter the selected area. 


Live Filters are also used when applying the Unsharp Mask. 
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Improving appearance using bitmap tools 


Fireworks comes with a decent set of standard retouching tools, including the 
Dodge, Burn, and Rubber Stamp tools. These tools can handle most basic retouch- 
ing requirements, without the need to jump back and forth between applications. 


Adjusting brightness with the Dodge and Burn tools 


This exercise and the Rubber Stamp exercise both rely on permanently altering 
pixels. Demonstrate what this means in a workflow in terms of preserving original 
image information, from working on a duplicate bitmap image to opening a file as 
an untitled document. 


Repairing areas with the Rubber Stamp tool 


Point out that for accurate retouching, it’s a good idea to zoom into the area to be 
fixed. In many cases, soft-edged brushes make for a more realistic effect, because 
the edge of the Rubber Stamp blends better with the surrounding area. 


Using the Rubber Stamp requires that you sample an area first using the Alt 
(Windows) or Option (Mac) key and clicking on the canvas. Point out that you 
can resample as often as you feel is necessary to produce a satisfactory result. 


Retouching on a separate bitmap object 


This is the prep work for the instant facelift exercise. The exercise discusses why 
retouching on a separate bitmap object is good professional practice and shows the 
steps needed to add the new bitmap object. 


In this scenario, an empty bitmap object is used, rather than a duplicate of the orig- 
inal bitmap object, but either workflow is useful and preserves the original bitmap. 


Another advantage of retouching in a separate bitmap object is that the opacity 
of the entire object can be reduced for a more subtle effect, or the retouching can 
even be deleted or hidden if it is no longer desired. 


Repairing areas with the Rubber Stamp tool 


This exercise combines the use of a separate bitmap layer and the Rubber Stamp to 
remove a shadow from the hull of a canoe. 


Because the students will be applying the retouching to a separate bitmap object, 
they will need to alter sampling options in the Properties panel. 


Point out that the opacity of the Rubber Stamp can be altered as well, which can 
create a more subtle result. 


Questions 


The following questions are not in the student’s Classroom in a Book. 


1 


2 
3 
4 


Why would you use the Unsharp Mask Live Filter? 
What tool can be used to brighten a specific area in a photo? 
What tool can be used to darken a specific area in a photo? 


Why would you group objects together and how do you do it? 


Answers 


1 


Images that have been resized smaller tend to also become softer in appearance 
due to the reduction in pixels, but you can gain back some of the original 
crispness of the photo by applying a filter called Unsharp Mask. Unsharp Mask 
can be applied as either a permanent filter or as a Live Filter. For the greatest 
flexibility, Live Filters are a better option. 


The Dodge tool can be used on photos or other bitmap objects to lighten an 
area by painting over it. You can adjust the brush (tool) size, softness, shape, 
exposure (degree of effect), and the tonal range (shadows, midtones, highlights) 
you want to alter. 


The Burn tool does the opposite of the Dodge tool, darkening areas where the 
tool is applied. In the Properties panel, you can adjust the same tool attributes 
as you can for the Dodge tool. 


Grouping related objects (a navigation bar, for example) makes it easier to 
reposition all the related objects in a single action. Grouping also simplifies the 
Layers panel, because grouped objects show only as a single object. You can 
group two or more objects by Shift-clicking on the objects and then choosing 
Modify > Group or pressing Ctrl+G (Windows) or Command+G (Mac). 


Lesson 4: Working with Selections 


This lesson introduces learners to working with bitmap selections. To limit bitmap 


effects to a specific area of an image, you must first make a bitmap selection. 


Point out to students that anything outside a bitmap selection will remain unaltered. 


Fireworks works equally well with vectors and bitmaps, and becoming aware of this 


flexibility is important to realizing the full potential of Fireworks. 


The basics of opening, importing, cropping, and retouching images will be covered 


in this lesson. 
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Goals for this lesson 


Localized bitmap editing is a very common workflow in digital imaging, and the 
main method for doing this is by using bitmap selections. Point out that often, only 
certain parts of an image need to be “corrected” or enhanced. Selections give you 
this level of control over a bitmap image. 


Complex selections can require time to create, so also be sure to point out that 
bitmap selections can be saved as part of the Fireworks PNG file. 


In this lesson, students will learn how to do the following: 

e Create a selection with the Magic Wand tool 

e Adjust the edge of a bitmap selection 

e Apply corrective filters to a selection 

e Make complex selections using the Lasso and Magic Wand tools 
e Modify a bitmap selection 

e Save a bitmap selection for future use 


e Convert a bitmap selection to a path 


Understanding bitmap selections 


This section gives an overview of the bitmap selection tools and discusses their 
various features. Point out to students that when making selections, you can switch 
back and forth between the tools, using whatever tool is most suitable for the work. 


Combined with the segment, “Bitmap selection tools: a primer,’ this section will 
help learners quickly gain a sense of the options available. 


Protecting original art 


Because modifying bitmaps usually means permanently altering pixel data, it’s very 
important that students get used to protecting the original artwork before attempt- 
ing any corrections. This workflow will save them time and headaches down the 
road, either for school assignments or even in their jobs as digital content creators. 
Emphasize that these types of precautions are considered best practices in the 
creative world. 


Several bitmap filters will be used in this lesson, and mistakes are likely to be made, 
so protecting the original artwork is critical. 


Selecting and modifying with the Magic Wand tool 


Selecting an area is one of the first steps to altering part of a bitmap. This exercise 


walks the learner through a tried-and-true workflow for bitmap editing, including 


the creation of a duplicate bitmap object. 


Using the Magic Wand with keyboard modifiers 


While this exercise uses the Magic Wand, point out that all the bitmap selection 


tools allow you to modify (add to or subtract from) the current selection using the 


same keyboard modifiers. 


Saving and restoring bitmap selections (sidebar) 


Point out that when creating complex selections, it can be helpful to save those 


selections for later use. Multiple selections can be saved with any file, as long as 


it is saved as a Fireworks PNG file. 


Selecting with the Lasso tools 


This exercise demonstrates how selection tools can be used interchangeably. 


Students start by using the Magic Wand to select a large area of similar color, then 


zoom in and use the Lasso tool and modifier keys to further refine the selection. 


Converting a selection to a path 


Because Fireworks can edit both vectors and bitmaps, it makes sense that bitmap 


selections can also be converted to vector paths. Point out that paths can be easier 


to edit than bitmap selections, thanks to the individual control points of a vector. 


Also, the students aren't as likely to delete an entire path by accident, something 


that is easily done with a bitmap selection by forgetting to use the Shift and Alt 


(Windows) or Option (Mac) modifier keys when adjusting a bitmap selection. 


And lastly, because vectors are not resolution-dependant, it is easy to scale vector 


objects without impacting image quality. 


Questions 


The following questions are not in the student’s Classroom in a Book. 


1 


2 
3 
4 
5 


How do you create a soft-edged selection? 

What does Live Marquee do? 

How do you save a bitmap selection? 

How do you convert a bitmap selection to an editable path? 


Why would you use the Select Inverse command? 
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Answers 


1 You can create a soft-edged selection by applying a feather to the selection. 
Feathering can be applied in three ways: 


- Select the feathering option in the Properties panel before the selection has 
been made. 


- Apply the feather afterward using the Properties panel and Live Marquee. 
- Choose Select > Feather from the menu. 


2 Live Marquee gives you immediate control over the edge of your bitmap 
selection after it has been drawn. You can choose Hard for an aliased hard- 
edged selection; Anti-aliased for a softer, slightly blended selection edge; or 
Feathered for a very soft blend. 


3 Once a bitmap selection has been made, choose Select > Save Bitmap Selection. 
You can name the selection in the dialog box that appears. 


4 You create a path from a bitmap selection by choosing Select > Convert 
Marquee To Path. The bitmap selection is deleted when you do this, but 
Fireworks also has a command to convert paths to bitmap selections, so 
the process is easy to reverse. 


5 Selecting the unwanted part of the image is sometimes easier. Select Inverse 
is used to toggle the active selection between the original selection and the 
nonselected areas. 


Let’s say you have a photo of a city scene with a clear sky in the background. 
You want to do some levels or filter adjustments to the city area. It will be easier 
(and faster) to use the Magic Wand tool to select the evenly colored sky. Then 
you can choose Select > Select Inverse to reverse the selected areas, making the 
city scene the active selection. 


Lesson 5: Working with Vector Graphics 


Vectors are a key design element in Fireworks and will be needed in almost any 
design a user creates. This lesson shows the student how to create and edit vector 
graphics and how flexible this graphic format is as a design tool. 


If the students have no previous vector art experience, the Pen tool can prove to be 
somewhat intimidating. Extra practice creating their own custom shapes, as well as 
adding more control points to existing paths, is recommended. The skills learned 
in this lesson can in many cases be transferred to other vector applications such as 
InkScape, Illustrator CS6, and even Photoshop CS6. 


22 INSTRUCTOR NOTES 


Looking forward, in Lesson 6 students will be working with both bitmap selections 
and vector shapes to create masks for a variety of objects. 


We recommend you also take time to explore the Path panel. This would be more 
of an intermediate exercise for you to create, but the Path panel is a powerful tool. 


Near the end of this lesson is an exercise using the Compound Shape tool. It is a 
great way to build complex vector graphics using simple shapes, rather than trying 
to create the graphic using the Pen tool or permanent commands such as joining, 
punching, or cropping. 


Goals for this lesson 
In this lesson, students will learn how to do the following: 
Draw simple vector shapes 
Identify the differences between vector and bitmap images 
Use the Compound Shape tool 
Create paths with the Pen and Line tools 
Edit paths with the Pen and Subselection tools 
Create a custom shape 
Use Auto Shapes 


Customize the fill and stroke of a vector shape 


Understanding vectors 


This segment and the accompanying sidebar help to explain what a vector path is 
and how vectors differ from bitmap objects. 


About bitmap images and vector graphics 


You might want to spend some time up front comparing vectors and bitmaps 
onscreen, showing the differences between the two main graphic formats. Show 
how scaling a vector object doesn’t impact image quality, while scaling a bitmap 
can cause serious image degradation as the image is resampled larger. 


Basic vector drawing techniques 


In Lesson 1, students created their first vector shape—a rectangle. In the first few 
exercises in this lesson, students will create a logo design for the fictitious Near 
North website, using only vectors. To begin, they will create ellipses and learn how 
to punch a hole through one vector object by using another. 


ADOBE FIREWORKS CS6 CLASSROOM IN A BOOK 23 


24 


INSTRUCTOR NOTES 


Creating a custom gradient 


Students will have an opportunity to not only work with gradient fills, but also 

to create their own custom gradient. Point out that they are limited only by their 
imagination when creating gradient effects, and show how the Gradient Editor has 
several precise controls for altering a gradient, such as Location of Stop and Angle. 
While they aren’t used in this lesson, show how to use the Opacity stops in the 
Gradient Editor to alter the translucency of a gradient fill. 


Understanding paths and the Pen tool 


Be prepared to spend extra time in this area if your students do not have any vector 
drawing experience. Proficiency with the Pen tool means they are not locked into 
using the standard shapes supplied by Fireworks; they can create their own. The 
Pen tool also is useful for creating custom mask shapes. Make sure students take 
time with the Subselection tool, as well, to practice editing the points of a new or 
existing vector shape. 


Other vector tools (sidebar) 


No specific exercise was created for the other vector tools, but this can be another 
opportunity for you to help your students gain confidence and get even more cre- 
ative with vectors. Each tool's functionality is outlined in the sidebar. 


Editing paths 


The real power in vectors is knowing how to edit them to get the results you want. 
Your main tool for editing a path is the Subselection tool. Point out that you can 
edit individual control points by selecting them with this tool, or you can hold 
down the Shift key to select multiple points and move them at the same time. 
Give your students time to practice altering a curve by dragging the Bezier curve 
control arms. 


Creating a custom shape 


Many things covered in Lesson 5 lead up to the final exercise “Making mountains 
out of vectors.” We've intentionally kept the shape simple, but at the same time, 
challenging. The result requires practice and precision and also relies heavily on the 
use of guides. Feel free to encourage your students to push their newfound skills. 


For those having difficulty, you can refer them to the finished artwork, also included 
in the exercise files. 


Creating an icon with the Compound Shape tool 


The Compound Shape tool gives users the ability to create complex vector objects 
using several more simple vector shapes. In this exercise, students create an icon 
for the Local smartphone app. This icon gets used at different sizes in this Lesson 
and in Lesson 7. Like with the logo, students are building the selection from scratch 
so they should gain not only proficiency, but also confidence. 


Questions 

The following questions are not in the student’s Classroom in a Book. 
1 How do you create a curved path? 

What tool is used to edit vector control points? 

How do you fill a vector shape with a pattern? 

How do you add extra control points to an existing path? 


How do you remove extra control points from a path? 


a wu A WwW N 


How do you create and edit a compound shape? 


Answers 


1 You create a curved path by first selecting the Pen tool. Then click and drag 
an existing control point in a vector shape to pull out the Bezier curve control 
arms. After a curve has been created, you can further edit it by dragging the 
control arms or the control point with the Subselection tool. 


2 ‘The Subselection tool can be used to move existing control points of a path or 
alter the curve of a curved path segment. 


3 To fill a vector shape with a pattern, select the shape with the Pointer tool, and 
then choose Pattern from the Fill Category and select a pattern. 


4 To add more control points to a path, select the Pen tool, and then click on the 
path where you want to add a new control point. 


5 You can remove a path by hovering the Pen tool over an existing control point. 
When you see the (-) sign beside the Pen tool cursor, click to remove the point. 


6 Draw a vector shape using the vector primitives (rectangle, ellipse, or polygon) 
or using the Pen tool. Click the Add/Union icon in the Properties panel and 
draw another vector shape. The two shapes are now grouped as a compound 
shape. You can continue to add vector shapes to the compound shape by 
drawing them. To edit a specific shape, choose the Subselection tool, and then 
click on the shape you want to edit. To move the entire compound shape on the 
canvas, use the Pointer tool. 
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Lesson 6: Masking 


This is where your students really start to work! Lessons 1 through 5 cover the 
basics of working in Fireworks, but in this lesson students will be building a banner 
ad practically from scratch and making use of one of Fireworks’ star features: mask- 
ing. Depending on your group’s skill/comfort level, you might consider breaking 
this up into two classes. 


Students will be importing bitmaps, working with both vector and bitmap masks, 
and learning nifty tricks such as how to edit a mask separately from the object 
being masked. 


Students get some practice with the Lasso tool to create a bitmap mask, as well 
as in applying Live filters to masked objects and editing the attributes of a mask. 


Students will also have the opportunity to work with the Auto Vector Mask 
command—a very quick and easy way to mask a selected object. 


Goals for this lesson 

In this lesson, students will learn how to do the following: 

e Create a bitmap mask from a selection 

e Edit a bitmap mask using the Brush tool 

e Create a vector mask from a custom vector shape 

e Edit the vector mask and change its properties using the Properties panel 


e Use the Auto Vector Mask command 


About masks 


We spend a fair amount of time up front discussing the two main types of masks 
you can create in Fireworks. You might want to have students try out some simple 
masking exercises of your own creation before jumping into the main lesson in 
the book. 


Although it is not discussed in this lesson, you can also mask one bitmap object 
with another, which can create interesting textures and effects. Read through the 
Help files to learn more about masking one bitmap with another. 


Designing the banner 


Several topics are covered in this section, including gradient fills. Gradient fills are 
a popular web design element, as well as a visual design element. Extra practice 
with manipulating gradients is a good idea, and using gradients comes up in several 
lessons. 


Importing assets 


Point out this commonly used technique to save the user a great deal of time. No 
need to copy and paste or to drag and drop images into a design when you use the 
Import command. 


Using the Auto Vector mask for quick fades 


If your students have worked in earlier versions of Fireworks, point out that the 
Auto Vector Mask command was previously named the Fade Image command. 
It can be applied to both bitmaps and other vector objects. 


Creating and editing masks 

Masking is an important creative feature in Fireworks. Getting comfortable with 
the various ways to create and edit masks opens up many options for students. 
Creating a vector mask 

The vector mask created in this exercise is a simple one, but point out that custom 
vector shapes can also be used as masks. 

Converting a bitmap selection to a mask 


The other main type of mask you can create is a bitmap mask. These are similar 

to Layer masks in Photoshop. Explain that you can use any of the bitmap selec- 
tion tools—or combinations of those tools—to create the selection. It can be easier 
at times to create a mask using selections, especially if you have an image with a 
strongly contrasting background. The Magic Wand can quickly select the back- 
ground, and then the selection can be inverted and the mask applied. 

Editing a bitmap mask 


For those not comfortable with the vector tools (we recommend practice, of 
course), editing a bitmap mask may be less intimidating because it involves the 
use of the Brush tool. Paint with white to reveal the image or paint with black to 
hide the image. 


Questions 

The following questions are not in the student’s Classroom in a Book. 
1 How do you unlink a mask from the object it is masking? 

2 How do you quickly change the Brush color when editing a bitmap mask? 

3 How do you change the edge softness of a Brush when editing a bitmap mask? 
4 How do you reposition an object within a mask? 

5 


What bitmap tools can be used to create a bitmap mask? 
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Answers 


1 


In the Layers panel, click on the chain link icon between the object and the 
mask. This gives you the ability to move or edit the mask separately from the 
object being masked. 


When working with bitmap masks, you can switch from black to white to gray 
to customize the mask. To do so quickly, use these shortcuts: 


- Press the B key to switch to the Brush tool. 


- Press the D key to set the color boxes to their default colors (black for stroke, 
white for fill). 


- Press the X key to toggle the current colors between stroke and fill. 


In the Properties panel, set the Edge value higher than 0. Use 100 to create a brush 
with a very soft edge, suitable for creating a soft, feathered edge for the mask. 


Make sure the object being masked is active. Using the Pointer tool, drag the 
blue control handle within the mask on the canvas to reposition the image 
without moving the mask. 


Any bitmap selection tool can be used to create a bitmap mask: Marquee, Oval 
Marquee, Lasso, Polygon Lasso, and even the Magic Wand. 


Lesson 7: Working with Text 


This lesson builds on the basic text skills students have been gaining up until now 


and covers more advanced typography features, as well as features such as wrap- 


ping text within a path. 


Point out that Photoshop, Illustrator, and Fireworks all use the same text engine, 


which means text should behave and look similar in each application. This can be 


helpful for those who start in Illustrator or Photoshop and then move their designs 


to Fireworks. 


Goals for this lesson 


In this lesson, students will learn how to do the following: 


Create both fixed-width and auto-sizing text blocks 
Import text from a .txt file 

Edit text properties 

Use commands to alter text 

Scale, rotate, and distort text 

Attach text to a path 


Flow text within a vector shape (Attach in Path) 


Text basics 


This section, along with “Creating an auto-resizing text block” and “Editing text,’ 
gives a basic but thorough introduction to adding text to a Fireworks document. 
Point out to students how you can easily select a text block with the Pointer tool to 
reposition it or jump into text edit mode just by double-clicking on the text itself 
with the Pointer tool. 


Flowing text within a vector shape 


Text can be flowed into any closed vector path—with the exception of composite 
paths. Point out that this can be a useful visual design technique and can also be 
used to mimic how text would wrap around a floated graphic on a web page. 


Typography terms (sidebar) 


Fireworks has some pretty advanced text attributes to help designers make the 
most of text in a design. The terms in this sidebar all relate to the attributes avail- 
able within the Properties panel when the text tool is active. 


About anti-aliasing (sidebar) 


Demonstrate to students how the different anti-aliasing settings can affect the 
display of text on screen and how, for example, small font sizes are more readable 
when anti-aliasing is turned off. 


Adding more depth to text 


Attaching text to a path, skewing text, using text as a mask, and adding Live Filters 
to masked text are all covered in this section. 


Skewing text 


Text can be scaled, distorted, and even skewed while still remaining editable. Live 
filters such as a drop shadow or glow can also be applied to live text. 


Although it is not covered in this lesson, you can also point out that text can be 
converted to regular vector paths if the user needs to do special work on the text, or 
if the file is being passed to someone who does not own the fonts used in the design. 


Using text as a mask 


While it’s not covered in the lesson, point out that text can mask another vector 

or even a bitmap image and, as always, the text remains editable. You can combine 
various techniques, such as attaching text to a path and then using it as a mask over 
a photograph, or adding Live Filters to masked text. 


Also point out that at times it may be easier to use the Text menu to make altera- 
tions to text. This can be the case when you have combined multiple effects such as 
masking and attaching text to a path. 
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Questions 


The following questions are not in the student’s Classroom in a Book. 


1 
2 
3 


What are the differences between kerning, tracking, and leading? 
How do you skew or distort text without converting it to paths? 


What is the best anti-aliasing setting for small type (10 point or below) 
and why? 


Where do you find commands such as Lorem Ipsum or Case Uppercase? 


What happens if there is too much text to fit on or in a path? 


Answers 


1 


Tracking adds equal amounts of space between all selected characters. 
Fireworks combines manual kerning and tracking settings into one field. If 

you select a string of text and enter a value in the field, you are adjusting the 
space equally between multiple characters (tracking). If you place your cursor 
between two characters, you can adjust the gap between the two letters adjacent 
to the cursor (kerning). 


Also known as line spacing, leading controls the amount of vertical spacing 
between lines of type. The word comes from the lead strips that were put 
between lines of type on a printing press to fill available space on the page. 


Select the text block, and then choose the Skew or Distort tool from the Tools 
panel. These tools are grouped with the Scale tool. Drag the control handles that 
appear around the text block to transform the text block. 


For text 10 points or smaller, the No Anti-Alias setting should be used. This 
makes small text more readable. Anti-aliasing blurs or blends the text edge 
with the background color, and this can make the text hard to read with small 
font sizes. 


A variety of text commands can be found in the Commands > Text menu. 


If there is too much text to fit on a path or within a path, a text overflow 
indicator will appear at the right edge of the path. Any text that won't fit on 
the path is hidden from view, but resizing the path (or the text) can bring the 
text back into view. 


Lesson 8: Using Styles and the Styles Panel 


This is a new lesson, not found in previous editions of the Fireworks Classroom in 
a Book. 


A powerful but often overlooked feature of Fireworks is the Styles panel. Working 
with styles can improve productivity, because you can apply a series of preset 
effects for text, vectors, and, to some extent, even bitmap images. You can then 
save that same series as a style and use it as often as you want without having to 
rebuild—or match—the complex effect from scratch. 


Goals for this lesson 
In this lesson, students will learn how to do the following: 
Apply prebuilt styles 
Edit styles 
Update styles applied to objects 
Create custom styles 


Export and share styles 


What are styles? 


Explain that styles are an editable collection of Live Filters and other object proper- 
ties that can be quickly applied to a selected object. Fireworks ships with a large 
collection of prebuilt style libraries (presets), found in the Styles panel. Think of 


those presets as a launching point toward creating your own custom special effects. 


Several new style libraries were added for Fireworks CS6. 


Take the time to show how styles can save time for your students, and improve 
design consistency. Styles are a way to quickly, reliably, and consistently apply 
specific effects to an object. For example, imagine you need to create icons or but- 
tons with a consistent look and feel for a CSS sprite sheet or to test text styling for 
CSS style sheets. Now imagine a ten-page application mockup where the button 
effects need to be changed on all pages. Fireworks can save you time in all of these 
scenarios. When you use styles, you can make changes to the styles of one object 
on one page, then cascade those changes through the entire mock-up. 


Applying style presets 

Begin working with styles by using the existing style libraries that ship with 
Fireworks. This gives students an opportunity to get comfortable with the Styles 
panel. Have the students practice with styles by applying them to vectors or to text 
blocks. Point out how the libraries have each been designed with certain purposes 
in mind, but that doesn’t mean you can use those styles on different objects. 
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Editing Styles 


Point out that the existing libraries are just the jumping off point for a student’s 
own creativity. Styles can be edited, reapplied, and even saved as custom styles for 
future use. 


Exporting and sharing styles 


Point out that teams are often involved in web design projects. One great feature of 
styles is that they can be exported and shared with the rest of a design team. Walk 
students through the process and have them e-mail a style library to someone else 
in class so they can walk through the entire workflow of creating, exporting, shar- 
ing and importing styles. 


Questions 

The following questions are not in the student’s Classroom in a Book. 
1 How can styles improve design consistency in a project? 

2 How do you create a custom style? 


3 How do you select unused styles in the Current Document window of the 
Styles panel? 


4 How do you remove styles from the Current Document window in the 
Styles panel? 


Answers 


1 Styles are to Fireworks what Cascading Style Sheets (CSS) are to HTML, or 
what styles are to a Word document: a way to quickly, reliably, and consistently 
apply specific effects to an object. Imagine you need to create icons or buttons 
with a consistent look and feel for a CSS sprite sheet or to test out text styling 
for CSS style sheets. Now imagine a ten-page application mock-up where 
the button effects need to be changed on all pages. When you use styles, you 
can make changes to the styles of one object on one page, then cascade those 
changes through the entire mock-up. 


2 ‘To create a custom style, select any object containing properties or filters, 
and then in the Styles Panel options menu, choose New Style. Name the style 
accordingly, choose which properties you want to keep for the style, then 
click OK. 


3 You select unused styles by first choosing the Current Document view in the 
Styles panel. In the Styles panel options, choose Select Unused Styles. All 
unused styles in the current document are selected. 
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4 To remove a single style or multiple styles, first make sure no objects are 
selected on the canvas. Then select the styles you want to remove by clicking 
on them. To select multiple styles, hold down the Shift key or Command (Mac) 
or Ctrl (Windows) key and click the styles to select them. Next, click on the 
trash can icon in the Styles panel to remove the styles. Remember that this only 
deletes the styles from the current document, not from the style libraries. 


Lesson 9: Using Symbols 


Symbols are one of the great time-saving features in Fireworks. They’ve been 
around since the first release of the application. Point out that symbols can contain 
multiple objects within a single asset and still give you quick access to editing those 
objects. Symbols can contain text, vectors, and bitmaps, each with its own Live 
Filter attributes. 


Symbols are an efficient way to reuse common graphical elements (logos, buttons, 
and so on) in a design. In addition, you can easily export symbols and share them 
with others. 


Goals for this lesson 
In this lesson, students will learn how to do the following: 
Add symbols from the Common Library 
Add symbols from the Document Library 
Create and edit a graphic symbol 
Create and edit a button symbol 
Save a symbol to the Common Library 


Preview rollover effects 


What are symbols? 


It’s important for students to know that a symbol is made up of two parts: the 
symbol itself and the instance on the canvas. If you want to make global changes to 
all the instances in a design (the color of a button, for example), you need to edit 
the symbol itself. If you just want to add a drop shadow to an isolated instance that 
is already on the canvas, simply select the instance on the canvas and make the 
change. 


Point out that students also have some editing control over individual instances: 
size, opacity, blending modes, and Live Filters can be added directly to individual 
instances without affecting the original symbol. 
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There are three main types of symbols (graphic, button, and animation), plus an 
enhanced graphic symbol called a component symbol. Component symbols have 
JavaScript functionality built into them and are usually edited in the Symbol 
Properties panel. Students will learn how to create the two most common symbol 
types (graphic and button symbols) and will learn how to edit an instance of a 
component symbol. 


Graphic symbols 


The lesson starts with converting an existing graphic to a graphic symbol. The 
sample image being used is one students should know well: the Near North logo 
that they created from scratch in Lesson 5. The graphic symbol is the simplest of 
all the symbols to work with, but it can be very useful. As an example, point out 
the Common Library to your students. There are several folders (the web and 
applications folder and the new gesture folder are favorites of ours) full of graphic 
symbols, and although your students may be starting off simple, it’s easy to see that 
graphic symbols can become quite robust. 


We recommend pointing out the shortcut key (F8) for creating symbols. If the 
students are on a Mac laptop, the shortcut is fn+F8. 


The Common Library 


Point out that the Common Library lets users share symbols across multiple docu- 
ments in Fireworks, unlike the Document Library, which is document-specific. 

You can add a symbol to the Common Library at the time it is created, or at any 
future time by selecting it in the Document Library and choosing Save To Common 
Library from the panel options. 


Editing symbols 


The ability to edit symbols in place, as you would in Adobe Flash, is a very handy 
workflow enhancement, because it allows you to see the entire design while editing 
a symbol. Double-clicking on an instance will fade all other elements on the canvas, 
making the symbol the only editable element onscreen. A breadcrumb trail appears 
at the top of the document window, making it easy to navigate back to the main 
design. 


Demonstrate that you can also edit symbols in Isolation mode by right-clicking 
(Windows) or Control-clicking (Mac) the instance and choosing Symbol > Edit 
Symbol. This editing mode hides all other objects on the canvas and may be helpful 
if you have a complicated design. 


While the book gives no specific example, take the time to show students that Edit- 
in-Place does not work when a symbol has 9-Slice Scaling guides applied to it. In 
this case, the symbol opens in isolation mode automatically. 


The universal Common Library 


The Common Library is a very powerful workflow feature in Fireworks. To begin 
with, it gives users access to hundreds of prebuilt symbols, often saving them 

the time of creating a graphic from scratch. Custom symbols are stored in the 
Common Library as well. 


Adding prebuilt symbols from the Common Library 


Students get firsthand experience at working with both graphic and Component 
symbols in this exercise, by creating a search field mock-up for the prototype. 
Using the HTML components in the Common Library for adding text fields and 
other form elements adds a lot of functionality and improves workflow. In the exer- 
cise, students add a text field symbol and gain experience by customizing parts of 
this component symbol using the Symbol Properties panel. For visual accessibility, 
a magnifying glass symbol is also used. 


Button symbols 


From a prototyping perspective, button symbols are a real time-saver. They allow 
you to create a four-state button with state effects very quickly. Creating prototyp- 
ing features such as interactive navigation bars is a snap! 


Button symbols take a little more planning than a simple graphic symbol. This can 
be a good place to talk a bit about site planning and best practices, because button 
symbols are most useful if they have text labels. It’s important to know what the site 
architecture (top-level links, for example) will be so that you can plan your button 
symbol dimensions based on the longest string of text. 


The button symbol is designed to export up to four different graphics for each 
button (up, over, down, over while down). Unlike graphic or animation symbols, 
Fireworks automatically slices button symbols, because it’s assumed the user will 
want to create a rollover effect. The slice is contained with the symbol, so it’s easy 
to move the entire object (including the slice) around on the canvas. 


Button symbol caveat 


Exporting a button symbol navigation bar for website use produces somewhat 
limiting results. Fireworks exports flat graphics for each state of each button, and 
the text labels are rasterized into those graphics. If you export the navigation bar 
as HTML And Images, Fireworks uses JavaScript, rather than CSS, to create all 
the interactivity and locks the navbar into a table-based layout. Neither of these 
options is considered a best practice in web design today. If you export as CSS 
And Images, Fireworks does not generate CSS to control button interactivity. So, 
as we said at the beginning, button symbols are great for prototyping. All is not 
lost, though. 
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Workarounds 


While Fireworks can’t directly create CSS-based button rollover effects from a 
button symbol, you should make your students aware of the growing popularity of 
this technique, and demonstrate how Fireworks can fit into this workflow by creat- 
ing the background images for the CSS button. For example, a button symbol with 
label can be used in the website mock-up, and then the styles used for the button’s 
look (color, effects, and so on) can be re-created on a larger scale to either act as a 
single background image or, for more flexibility, as background graphics for a CSS 
technique called the Sliding Door technique. You can find a great explanation of 
the sliding door technique at www.alistapart.com/articles/slidingdoors. 


Alternatively, the new CSS Sprites export workflow (covered in Lesson 10) is worth 
investigating. For specific instructions on applying the exported CSS to a web page, 
be sure to check out the following tutorial: http://www.adobe.com/devnet/ 
fireworks/articles/css-sprites.html 


Editing a button symbol 


Button symbols have special properties that can only be accessed after double- 
clicking on the button instance. While in symbol editing mode, you can also add up 
to three more states and determine whether you want Fireworks to handle slicing 
automatically or leave the slicing up to you. Point out that in order to add more 
states, you need to make sure nothing is selected on the canvas first. Then you will 
be able to add more button states from the Properties panel. 


A quick demo of the state-creation process would be a good idea. 


Testing the button symbol 


Point out that the Preview options in Fireworks are not just for checking optimiza- 
tion settings; you can test out state-based interactivity as well. Mousing over button 
symbols will show rollover effects, and if there are any on-click events applied, they 
too will work, as long as it’s just a state change. Preview mode will not let you move 
to a different page in the design. 


If students want to test hyperlinks, they can choose File > Preview In Browser > 
Preview All Pages In (default browser). 


Students will get a more realistic experience if they hide slices and hotspots while 
in preview. 


Animation symbols (sidebar) 


A sidebar discusses the animation symbol, exposing the student to the States panel 
and the basic concept of frame-based animation, including onion skinning and 
state delay. Point out that Fireworks animation capabilities are limited to what GIF 


animation can achieve. Complex animation should be done in a program such as 
Adobe Edge or Adobe Flash. 


Also mention that because animations require several frames, it may be best to cre- 
ate each animation on a separate page so that Fireworks does not export multiple 
files for the rest of the design. 


Altering animation settings 


Point out that several elements of the animation symbol can be added or altered in 
the Properties panel. You can change the number of states in the animation or alter 
opacity, size, or even rotation after the symbol has been created. 


Creating a“hi-res symbol” 


A “hi-res symbol” is a technique in which high-resolution bitmaps are used in a 
graphic symbol to eliminate the image quality problems incurred when scaling 
bitmaps. 


Explain to students that scaling or resizing bitmap objects is a destructive process; 
as an image is reduced in size, pixel data is discarded. This means that if the image 
is resized larger at a later date, the image quality will suffer, often greatly. 


A “hi-res symbol” circumvents this issue by using a large, high-resolution image 
as a symbol. The resulting instance on the canvas can be resized as often as you 
want with no breakdown in image quality, because the sampling occurs at the 
symbol level rather than the instance level. The only thing to remember is not to 
resize the instance larger than the original graphic dimensions; at that point, 
quality will decrease. 


Although this technique can be helpful in the design stage, point out to students 

that their Fireworks PNG file sizes will increase noticeably. We don’t recommend 
overusing this technique in any one design as a large number of “hi-res symbols” 
in one document can impact overall performance. 


Questions 

The following questions are not in the student’s Classroom in a Book. 
1 What is a symbol? 

2 How do you edit a graphic symbol? 

3 How do you add a symbol to the Common Library? 

4 What are the pros and cons of creating and using “hi-res symbols”? 
5 


What is a component symbol, and how do you edit its properties? 


ADOBE FIREWORKS CS6 CLASSROOM IN A BOOK 


37 


Answers 


1 Symbols are reusable graphic elements. Fireworks has three types of symbols: 
graphic, animation, and button. When you edit the original symbol object, the 
copied instances automatically change to reflect the edited symbol (unless you 
break the link between the two). 


Symbols are also helpful for creating buttons and animating objects across 
multiple states. 


2 You edit a graphic symbol by double-clicking on the instance on the canvas. 
Alternately, you can select the instance and then choose Modify > Symbol > 
Edit Symbol (Isolation mode) or Modify > Symbol > Edit In Place. 


3 To adda symbol to the Common Library, select the symbol in the Document 
Library and choose Save To Common Library from the panel options. 


4 “Hi-res symbol” is a phrase we coined, and it refers to using a high-resolution 
bitmap file as the basis for a graphic symbol. The key advantage of this 
technique is that the designer can easily scale a “hi-res symbol” larger 
and smaller, as often as desired, with no image degradation. This can be a 
very handy technique in the design stage, when image sizes are still being 
determined. 


Disadvantages include larger than average Fireworks PNG file sizes, because 
Fireworks is including a large, high-resolution graphic as part of the file. Also, 
it is not recommended to use multiple “hi-res symbols” in the same file, as 
Fireworks performance may degrade. 


5 A component symbol is a little like an Auto Shape; many of the symbol’s 
attributes are controlled programmatically using JavaScript. For example, a 
text field component symbol gives the designer the ability to set a field label, 
font size, and color and to display the field as enabled or disabled. These 
changes are made using the Symbol Properties panel, normally docked with 
the main Properties panel at the bottom of the Fireworks workspace. 


The advantage to using component symbols is that the designer does not need 
to create multiple assets, or states, to emulate the different appearances of an 
object (such as a check box or radio button). The symbol is simply dragged onto 
the canvas and altered using the Symbol Properties panel. 
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Lesson 10: Optimizing for 
the Web and Mobile 


In Lessons 3, 4, 5, and 6, students learned the basics of working with graphics in 
Fireworks. In this lesson, they will apply those skills to creating assets for web pages 
and web-page design itself. 


This is a very important topic when it comes to the Web. It can be easy to forget 
that not everyone has a high-speed Internet connection, but as professionals, web 
designers must take into account that people can be viewing a website using a wide 
variety of devices and at very different bandwidths. The first few sections of this 
lesson cover image optimization in detail, starting with why it’s important and then 
moving into the various web graphic formats. 


In keeping with this consideration, the new CSS Properties panel gives users the 
opportunity to design visually, extract CSS properties from vectors and text, and 
then export CSS markup seamlessly into existing or new CSS rules in a CSS file. 


Likewise the use of CSS Sprites is gaining in popularity, and Fireworks CS6 has a 
new workflow dedicated to helping designers create sprite sheets and the necessary 
CSS for the final bitmap sprite file. 


Goals for this lesson 

In this lesson, students will learn how to do the following: 

e Export a single image to a web-ready format 

e Determine the optimal web format for a sliced graphic 

e Use the Optimize panel and Preview views to optimize images 
e Slice up graphics in a web-page mock-up using the Slice tool 

e Export a single page HTML prototype 

e Export a CSS Sprite sheet (New in CS6) 


e Extract CSS properties from vector artwork (New in CS6) 


Optimization basics 


This section explains why optimizing graphics is so important for websites and 
discusses in detail the different formats available for use on the Web. 


We recommend that you again reinforce the difference between Fireworks 

PNG files and standard, flat PNG files. It’s crucial that students understand that 
Fireworks PNG files should not be part of a final web-page design. A discussion of 
the differences between saving files in Fireworks and exporting them is also a good 
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idea. We also make mention of alpha and indexed transparency and recommend 
you show students the differences between the two options, and which formats can 
make use of them. 


Saving versus exporting (sidebar) 


Take the time to make sure students understand the differences between saving 
and exporting; this area can trip up new users. Ideally, walk them through different 
scenarios, demonstrating when you would save a file versus when you would export 
a file. 


About the Optimize panel 


Point out that like many aspects of Fireworks, the Optimize panel works in 
conjunction with several other elements of the interface: the preview buttons, 
the Properties panel, and slices. 


Although it is not covered in the lesson, take the time to demonstrate other 
methods of optimizing and exporting files, such as the Image Preview command, 
Export Area command, and exporting selected slices. 


Optimizing a single file 


There are several subsections dedicated to this exercise, building a foundation and 
explaining a workflow that students can follow when optimizing single images or 

a series of image slices. If the student is working with only a single image (a photo- 
graph, for example), there is no need to slice the image first, and students should be 
made aware of this. 


While not a new feature, Selective Quality has been called out in its own exercise, 
to show students how to get the best of both worlds: good quality and smaller file 
sizes. This feature is unique to Fireworks and is often overlooked by users new and 
old, simply because they are not aware of it. 


Point out to students that this feature is also very handy when text (real, editable 
text) is part of a design, because Selective Quality can automatically optimize text 
areas at a higher quality setting, preserving text sharpness. 


About the web tools 


This is the first real introduction to the web objects in Fireworks. Begin by explain- 
ing what slices and hotspots are and how they are different from each other. 


Getting comfortable with slicing a design is an integral part of using Fireworks 

as a web design tool. We recommend you keep things simple and work only with 
rectangular slices. Polygonal slices add an extra level of complexity to a web page, 
because a single polygonal slice becomes several smaller rectangular images, linked 


together with hotspots in the HTML code. Not a lot of fun for the novice, if they 
have to edit code. Also, rectangular slices make it easy to utilize exported images as 
just image files, rather than a combination of HTML and images, which is the final 
output for a polygon slice. 


Creating and optimizing slices 


This section demonstrates two ways of creating slices: by hand and automatically. 
Not as much focus is placed on optimization, but we recommend you walk your 
students through the same previewing process as outlined earlier. We can’t empha- 
size enough the importance of becoming proficient with image optimization or its 
importance to a website, especially with the proliferation of mobile devices and 
the cost of data plans for these devices. Smaller file sizes mean less cost to the end 
user and faster downloads. Although this lesson doesn’t cover them, take the time 
to show students the best ways to optimize vector artwork. You can certainly test 
this out using the nn_logo.fw.png file found in the exercise files of Lesson 5, or have 
the students create their own logo or vector artwork to see which format best suits 
vector graphics. 


Also, take the time to explore the various options for PNG optimization. For 
example, PNG 32 creates high-quality exports that can use 8 bits for alpha trans- 
parency, which is great for drop shadows, glows, and semi-transparent images. 
The trick to using PNG 32 is making sure the canvas is transparent and that the 
object you are optimizing is not sitting on top of any opaque backgrounds. Equally 
important is the ability to create alpha transparent PNG 8 files. This technique is 
rarely found in other software and as a result, is often overlooked. PNG 8 images 
with transparency can be very useful in mobile design, due to their small file sizes, 
when compared to PNG 32. 


Creating hotspots 


Hotspots are the other web objects available in Fireworks. Unlike slices, hotspots 
are only suitable for interactivity; they cannot be used to cut up a design into 
smaller images or to optimize graphics. But they are powerful nonetheless. Spend 
time discussing the strengths of hot spots. You may want to read ahead to Lessons 
11 and 12, where both web objects get a real workout, so you can present some 
examples of advanced interactivity, such as mocking up an Ajax data table or pop- 
up window. 


Exporting HTML And Images 


Fireworks has two main workflows for converting full designs into web pages: 
Export as HTML And Images or Export CSS And Images. The first of these two 
export workflows has been around since Fireworks began, and it produces a rigid 
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table-based layout, where everything in the web page (including text) is turned 
into graphics. Although it’s not a good practice to use this option for a real website, 
it definitely has its advantages when creating interactive prototypes because it is 
quick and easy to create and to update with client changes. 


It’s important to stress that students should never use the HTML And Images 
export for a final website. There are many reasons for this: accessibility, search 
engine indexing, text-based browsers, and site maintenance, to name a few. 


Creating a sprite sheet 


New to Fireworks CS6 is the ability to export sliced graphics as a sprite sheet. A 
sprite sheet is a single file containing a series of graphics (usually icons or buttons) 
that can be called on by a Cascading Style Sheet (CSS) to display bullets or rollover 
effects. 


Explain that a sprite sheet is a bitmap file that stores multiple, usually small, graph- 
ics, such as button background images, custom bullet graphics, icons, and even 
logos. This file, combined with a CSS file, lets the web browser quickly load all the 
background graphics (all one page, remember) and then display an image located 
at a specific set of pixel coordinates from within the bitmap file. 


Creating the CSS for a complex sprite sheet by hand is, to say the least, tedious and 
probably quite intimidating for someone new to using sprite sheets. In the image 
editor, each image has to be planned out in terms of its exact pixel location, and 
you must record those locations so that later you can hand-code a bunch of CSS 
classes to enable the browser to locate each individual graphic—heck of a way to 
spend your class time! 


Fireworks makes this process virtually painless and fast, however, by exporting the 
flat bitmap file and the CSS needed for using sprites in a web page. 


The book covers how to slice and export the files, but it does not go into using the 
sprite sheet and CSS in a web editor. We recommend you walk through this process 
on your own first and ideally, create a web page that uses the final sprite sheet and 
its companion CSS file, to show students the completed process. 


Exporting CSS And Images 


The goal behind CSS And Images export is to produce a web page right from 
Fireworks that meets standards compliancy for HTML and CSS. The resulting 
HTML and CSS documents can be edited within Dreamweaver or any other 
web-editing software. 


The CSS And Images export workflow has not changed since CS5. Many of these 
features are not discussed in any detail in the book, but we felt it best to make sure 
you have a list of the highlights from CS5: 


e Exporting multiple pages at once (current page, selected pages, all pages) to 
HTML and CSS 


e ‘Tagging text objects by tag name to output the text with a particular tag for 
improved semantics 


e Adding the Text Area symbol for improved form prototyping 


e Adding the List Item symbol to allow for the creation of unordered lists/ 
unordered lists of links 


e Outputting intelligent hex codes for all colors using shorthand notation (#fff) 
where appropriate and lowercasing 


e Creating multiple paragraph elements from a single text object where 
appropriate, as opposed to using breaks 


e Alphabetizing as many CSS rules as possible 


e Recalculating all font sizes to use percentages (%) to allow for text resizing in 
all devices 


e Using <div>s with heights that have min-height equivalents to allow for text 
resizing and any amount of content 


e Using <div>s with all border placements and sizes output at the correct size and 
positioned correctly 


e Using visited, hover, and focus link styles that inherit standard link formatting 


e Removing heights on form elements to allow for the browser to define 
their height 


e Using improved background slices that take advantage of the original 
background color to allow for text resizing/larger content 


e Outputting selection lists with the options specified in the symbol’s properties 
e Taking advantage of properly grouped radio buttons 


e Adding display: inline on all floated elements to prevent the Internet Explorer 6 
double-margin float bug 


e Replacing <br> with <div> tags to clear floats so unstyled users don’t have 
unnecessary line breaks 


e Using lines that are output at their correct position 


Point out that states and behaviors are ignored during the export. These features 
would have to be added back in when you are editing the web page itself. 
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It’s a good idea to read this article ahead of time: www.adobe.com/devnet/ 
fireworks/articles/standards_compliant_design.html. Make it available to your 
students, as well. Although the article is written for CS4, the updates to the CSS 
And Images export are all based on the work of Matt Stow, the author of the article. 


It’s also important to note that this export option in no way absolves users from 
having a good comprehension of HTML and CSS standards. 


Using the CSS properties panel 


The new CSS Properties panel helps simplify the tedious process of hand-coding 
CSS for certain elements. Object properties in Fireworks (fills, borders, color, 
border radius, drop shadows, alpha transparency, glows, gradients, and font prop- 
erties) that can be represented in CSS without graphics are now extracted using 
the CSS Properties panel, helping reduce the effort of having to master all browser- 
specific CSS properties. 


When students are learning about web design (CSS and HTML), a very helpful 
process is to create the visuals first and then translate them to code. The CSS prop- 
erties panel, in our view, is not just a great workflow tool for professionals, but also 
an excellent learning tool, because students can design something, then relate the 
visual effect to the final CSS markup, before even going to the web page editor. 


Take time to explore this panel with your students and show them how they can 
quickly customize a standard Dreamweaver Starter Page simply by using the CSS 
extracted by this panel. 


Questions 

The following questions are not in the student’s Classroom in a Book. 
1 Why are images sliced? 

2 What does the Optimize panel do, and how do you access it? 


3 What options do you have for previewing your optimize settings 
within Fireworks? 


4 What isa sprite sheet, and why would you use it? 


5 What is Selective Quality, and how do you use it? 


Answers 


1 


Generally, images are sliced in order to break up a larger design into smaller, 
more manageable graphics. Traditionally, these graphics were added to a table- 
based layout to “rebuild” the design in an HTML page. The common practice 
now is to slice a design so that only the necessary graphics are exported, and 
those images are used as either foreground or background images within a 
CSS-based layout. 


The Optimize panel gives you complete control over the export format and for a 
selected slice, or over global formatting options for any areas in the design that 
are not sliced. To access the Optimize panel, select Window > Optimize or press 
the F6 key. 


You have three preview options built into the Fireworks interface: Preview 
(single view), 2-Up (two customizable views), and 4-Up (four customizable 
views for comparing optimization settings). 


A sprite sheet is a bitmap file that stores multiple, usually small, graphics, 
such as button background images, custom bullet graphics, icons, and even 
logos. This file, combined with a CSS file, lets the web browser quickly load all 
the background graphics (all one page, remember) and then display an image 
located at a specific set of pixel coordinates from within the bitmap file. 


From the standpoint of data and bandwidth, all the graphics in the sprite sheet 
are loaded at the same time because the sprite sheet is just one graphic file. The 
browser loads the entire file into its cache, and this means the browser is not 
continually sending requests to the server for this file or that file; they’re already 
in memory. It also means there is no need for any JavaScript preloading scripts 
(common in the bad old days of graphical button rollovers) and means the 
display of images is virtually immediate. 


Selective Quality is a feature that lets you set two different JPEG compression 
settings within a single graphic or image slice. By using bitmap selections, you 
can mask specific areas with important detail in a photo and set a higher-quality 
(lower compression) value for those areas. Also, Selective Quality has preset 
options for maintaining the quality of text and buttons, without having to use 

a JPEG mask. 


To use Selective Quality, open the Optimize panel and click the Edit Selective 
Quality Options icon. When the options window options, enable Selective 
Quality. Choose any other presets that are suitable, and if desired, change the 
default quality setting. If you are just controlling text or button quality, you’re 
done. If you want to selectively optimize image areas, you will need to use 

a bitmap selection tool to create a bitmap selection, then choose Modify > 
Selective JPEG > Save Selection as JPEG Mask. 
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Lesson 11: Prototyping Basics 


Fireworks is not just a graphic design tool for screen images. It has workflows 

to expedite a variety of professional production needs, from web-page design to 
application interfaces, from rough concepts to fully detailed and interactive design 
comps. This is an important distinction for Fireworks. 


It’s time to demonstrate and emphasize to students this feature set. In this lesson, 
students will be working with a wireframe of a planned project. The concept of 
wireframing is an important one, because it focuses on flow and function rather 
than the design aesthetics. Wireframing a project first can identify user issues or 
breaks in the logic of an application. Emphasis is placed on working with the Pages 
panel shared graphic layers, new gesture symbols for touch devices, and hotspots 
for interactivity. The end result is an interactive PDF file that can be e-mailed to 

a client for review and feedback. 


Goals for this lesson 

In this lesson, students will learn how to do the following: 
e Edit a multipage wireframe 

e Share layers to multiple pages 

e Use assets from a template 

e Add gesture symbols 

e Preview a wireframe design in a web browser 


e Export a secure, interactive PDF file 


The prototyping workflow 


Introduce this concept, showing how the pieces fit together: concept, wireframe, 
storyboard design, prototype. For wireframing and prototyping, the Pages panel is 
extremely important, allowing you to keep an entire design concept within a single 
file. This makes linking to separate pages very easy, which expedites the process 

of creating an interactive prototype. The Pages panel is where you create new or 
duplicate pages and designate a Master page when necessary. Because the wire- 
frame in this lesson is based on a tablet application, a Master page was not used. 
Instead, shared layers are used heavily. Take time to explain when a Master page 
would be useful, and when shared layers offer more flexibility. 


Exploring the Pages panel 


Be sure to refresh students on the importance and functionality of the Pages panel. 
Creating, duplicating, and navigating pages in the Pages panel is key to building 
functional and interactive wireframes and prototypes. Show students how to sepa- 
rate the Pages panel from the default grouping of Pages, Layers, and States panels 
and why this can improve their workflow. 


Master page 


The generic term “pages” has been used throughout the book, but students may 
also hear the term “child pages” when discussing pages that are linked to a Master 
page. Pages linked to a Master page take on the same dimensions and canvas, color, 
and optimization settings as the Master page, as well as share (by default) the 
graphic elements from the Master page. 


Linking to a Master page and sharing the Master page layer on child pages are 
mutually exclusive options as well, although that may not be immediately obvious. 


Review the uses of the Master page and its limitations. Although it is not covered 
in the lesson, you can also demonstrate how to unlink a page from the Master page, 
by selecting Remove Master Page Layer from the Layers panel options menu. Each 
Fireworks file can contain only one Master page. 


By default, if you have a Master page, new pages will always have the Master page 
layer added to them on creation. 


However, designs do not have to use a Master page. This can be quite useful when 
creating multiple design concepts in one file or as in our lesson, when the wire- 
frame represents a tablet application in both horizontal and vertical orientations. 


Comparing wireframe pages 


Encourage students to explore the supplied wireframe and point out to them 
features such as shared layers and how shared layers differ from a Master page. 
Point out that the point of a wireframe is that it can be created quickly and then 
discarded when no longer needed. It’s unlikely that any graphics used in a wire- 
frame will end up in the prototype or final product because of the simplicity of 
the graphics. 
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Adding pages to the wireframe 


Up until this point in the book, students have been working with relatively com- 
plete files. Here they will build two new wireframe pages from scratch and then 
reuse some existing graphics, as well as add symbols from the new gesture symbol 
library. Talk to them about the importance of repurposing assets by creating and 
using symbols. The supplied file has several symbols already made, but this might 
be a good time to refresh students’ memory on symbols and have them create at 
least one new one for use in the wireframe. 


Sharing layers to pages 


This workflow can save the user a lot of time when working on a design, and it 

is not as limiting as a Master page can be. Point out that sharing a layer to pages 
means you can be selective about which pages display the content from the shared 
layer. This is unlike a Master page, where all the layers on a Master page are either 
applied to the page or removed. 


For example, if the user wants to include contextual navigation on certain pages 
but not on all, sharing layers to pages is the answer. It can also be helpful if you 
are working with different page dimensions. You could have one footer layer that 
displays footer information at approximately 400 pixels from the top of the page 
for shorter pages, as well as another footer layer that displays the footer info at 
900 pixels from the top. Short pages share one layer; long pages share the other. 
Sharing layers to pages is also used in Lesson 12, where students are working on 
a realistic prototype of a website. 


Changing Fireworks preferences 


The Preferences panel is not covered in too much detail in this book, so take time 
(if you haven't already) to discuss the panel and how it affects the various fea- 
tures of Fireworks. In this lesson, students are disabling a single preference in the 
General category: Scale Strokes And Effects. The reason for this is to ensure that 
as instances are resized on the canvas, any strokes that are part of objects within 
the symbols are not scaled as well. You don’t want a fine, one-pixel stroke suddenly 
changing to a four- or six-pixel line just because you resized an instance. Note that 
preferences are sticky, meaning that, in this case, Scale Strokes And Effects will 
remain disabled until the setting is changed again in the Preferences panel. 


Adding gesture symbols and Accelerometer events 


Remind students that this wireframe is for a tablet app, so it’s important that the 
wireframe indicate how users will interact with the app (typically done using ges- 
tures such as swiping or tapping). Using the new gesture library, students will add 
symbols to indicate how the app is to be navigated and that the app can be viewed 
both vertically and horizontally. 


Point out also that there are several symbol libraries in the Common Library that 
can be used for mobile prototyping, including the Wireframe, Wireframe-iPad, 
and Mobile Icons libraries. 


Completing the interactivity 


Point out that adding interactivity using a design tool can be a real time-saver. 
No coding is required, so building the wireframe and editing it based on client 
feedback is quick and easy. 


As you build your interactive objects (hotspots in this lesson), point out that the 
links in the URL bar of the Properties panel are divided between session history 
(above the divider) and true links (below the divider). Only the links below the 
divider will generate functional links, even if there is a matching page name in the 
history section. 


Point out also that PDFs support only rectangular web objects (slice or hotspot). 
It’s worth noting that if you scale hotspots, Fireworks might convert them to poly- 
gon shapes, so double-check that the hotspots are still listed as rectangles in the 
Properties panel, if they are resized manually. 


Testing the links 


Emphasize the importance of testing interactive elements. Rollovers and state 
changes can be previewed in the Preview mode, but page linking must be tested 
by previewing all the pages in a web browser. 


Depending on the previous export settings, students may find that their temporary 
web pages are graphically incomplete. If this occurs, the only workaround is to first 
export the design as HTML And Images, making sure that Include Areas Without 
Slices is selected and that Current Page is deselected. 


The next time they attempt a preview, things should work properly. 


While not covered specifically in the lesson, it may be a good idea for students 
to set their base page optimization settings to GIF or PNG 8 for the wireframe— 
before previewing the work. Because the wireframe is all solid colors, lines, and 
text, this will result in a better graphical display. 


Creating a secure, interactive PDF 


The steps for exporting an interactive PDF are outlined here. It would be good to 
have Acrobat Professional installed on the systems your students use so that they 
can enable commenting for Adobe Reader (this is something that Fireworks is not 
capable of doing) and test out the password protection for certain tasks. 
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Questions 


The following questions are not in the student’s Classroom in a Book. 


1 
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What security options are available when creating a secure PDF from 
Fireworks? 


Why would you share a layer to other pages in a design? 
What web objects can be used when creating interactivity for a PDF file? 
Why is it important to use simple graphics and neutral colors in a wireframe? 


What symbol library can be used to help create wireframes for tablet 
applications? 


Answers 


1 


You can set PDF security for file opening and for performing tasks. One 
password is used to open the file, and another is used to enable the following 
tasks: printing, editing, copying, and commenting. If no passwords are set, 
all tasks listed are available. 


If you have content that needs to be on some but not all pages in your mock-up, 
you can use Share Layer To Pages to specify to which pages the content should 
be shared. Updates to the shared layer can be made on any page sharing the 
layer, and these updates will propagate across those pages. 


The only web objects supported by PDF are rectangular slices or hotspots. 
Because PDFs do not support rollovers or state changes, it’s safe to use just 
the rectangular hotspot tool. The exception to this would be if the design is 
also intended to become a web page mock-up, where slicing would be needed 
for optimization and visual interactivity. 


The goal of wireframes is to demonstrate flow, function, and usability. Keeping 
the graphics simple and colors neutral means the team and the client focus 

on elements, rather than the aesthetics of the wireframe. By keeping graphics 
simple, you can build the wireframe quickly. 


There are several symbol libraries that can be helpful in tablet wireframes, 
including the Gesture, Wireframe-iPad, Windows Phone 7, Wireframe, and 
Mobile Icons symbol libraries. 


Lesson 12: High-Fidelity Prototyping 


This lesson builds on the concepts learned so far about slices, hotspots, states, and 
sharing layers to pages. In this chapter, students will take a closer look at creating 
effects such as rollovers and emulating pop-up windows (including two ways to 
create the pop-up window effect). 


Remind students that although Fireworks is an excellent graphics editor that can 
do a great deal, it is not designed to be, nor should you expect it to be, an HTML 
web-page editor or website creation tool. 


Goals for this lesson 

In this lesson, students will learn how to do the following: 

e Create a Master page 

e Import pages into the design 

e Use the Slice tool for interactivity 

e Trigger a disjointed rollover (emulate dynamic content updates) 
e Preview an interactive web-page design in a web browser 


e Export an interactive mock-up of a website 


Reviewing the finished prototype 


A little repetition never hurt anyone, especially when learning something new. 

The opening exercises in Lesson 12 follow a similar format to Lesson 11. In this 
case, however, students get to explore a completed version of a website prototype. 
This orientation also shows them what their goals are and how the various elements 
should work when their version is completed. 


Fleshing out the prototype 


Having students build the entire prototype from scratch would be a pretty hefty 
endeavor for a single lesson, so the students will start with a working file that has 
many assets already added. In this second series of exercises, they will be creating 
the Master page, adding pages, slicing the banner area, and adding hotspots for 
navigation. 


Creating the Master page and adding more pages 


Before the rollovers are added, the Master page and a couple of new content pages 
must be created. The artwork for the Master page is in place already on a separate 
page, but here the student will get the chance to convert the page to a Master page 
and see how this change to the document affects existing and new pages. 
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Creating simple rollovers 


After the basic structure has been completed, students move on to creating rollover 
effects and using slices, states, and shared layers. Emphasize the importance of 
naming slices, and recommend options for some standard naming conventions. 
There are several exercises in this section, including creating button symbols for 
the main navigation and adding rollover effects and hyperlinks. 


Button symbols are created for the main navigation, primarily to demonstrate the 
desired effect on what would eventually become HTML text hyperlinks. Point out 
that for the final website (rather than the prototype), the navigation would be kept 
as text and then styled using CSS. 


Adding the rollover behavior 


Reserve time to talk about Fireworks behaviors and their importance for creating 
realistic interactive prototypes. Creating simple rollover effects is quite easy once 
you've done it a couple times, but it may seem a little intimidating to a novice. 
The great thing about behaviors is that no coding or knowledge of JavaScript is 
required. 


Explain how states play into the rollover effect and how you can easily create a new 
look for a hover effect by duplicating a current state and then adding Live Filters to 
the rollover objects in the new state. 


Creating remote rollovers 


This exercise goes into much greater depth and detail because the end result is 
also much more detailed. In this scenario, both rollover and click triggers are used 
to create a very realistic, AJAX-style effect, where clicking on an icon triggers the 
display of completely new content elsewhere on the page. 


Utilizing this type of interactivity definitely takes a mock-up beyond the basic stage 
into a more robust and functional prototype. A client can truly get a “feel” for how 
the final website will look and behave. 


Walk through the final page in the completed file, showing students what the end 
result should look like and how it should behave. 


Although this book does not go into depth on topics such as AJAX (Asynchronous 
JavaScript And XML), you may want to make the time to show students examples 

of these technologies, so they better understand what they are trying to achieve in 
the prototype. 


Completing the prototype 


This final section walks students through two more exercises: creating a photo gal- 
lery page mock-up from scratch and exporting the prototype. Even though this will 
not be a functional photo gallery, a good deal of time is spent making it realistic. 


Cropping individual bitmaps in a design 


The ability to further crop a bitmap once it has been imported or pasted into an 
existing design is very useful, and this is demonstrated when the student has to 
export the banner image of a website design, for client review. 


Exporting the prototype 


The export workflow used for the prototype is HTML And Images. As mentioned 
in the book, this export produces a series of rigid, table-based HTML pages. This 
end result is fine for prototyping purposes, but be sure to stress that this export 
option is not recommended for a final production website. There are several rea- 
sons for this: 


e Table-based layouts are no longer considered best practices. 


e Multiple unnecessary images are exported in order to allow the table to display 
the design. Many images are exact copies of each other, created from the other 
pages in the design. 


e All elements in the design are converted to graphics, including text. 


e Editing the resulting HTML can be problematic; for example, deleting a graphic 
slice to replace it with true HTML text can break the entire layout. 


We recommend you run through this workflow yourself before presenting it to the 
class, to help you anticipate any potential questions. 


Questions 
The following questions are not in the student’s Classroom in a Book. 
1 What are the benefits and limitations of using a Master page? 


2 How do you change a Swap Image behavior event from being triggered by 
a mouseover to a mouse click? 


3 Should the HTML And Images export be used for a final production website? 
Why or why not? 


4 What steps are required to create a simple rollover effect? 


5 How do you edit a Fireworks behavior? 
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Answers 


1 


Graphic elements common to the entire design can be kept on a Master page. 
So if you need to update those graphics, you can do the editing on the Master 
page, and the changes will appear on all pages. 


The main limitations of Master pages are that you can have only one Master 
page per file and that the elements on the Master page will appear in the same 
physical location on all pages, regardless of an individual page’s dimensions. 


Select the slice where the behavior has been applied, and open the Behaviors 
panel. Choose the appropriate onMouseOver event (there may be more than 
one, depending on the interactivity applied to the slice), and click the drop- 
down menu beside the event name. Select onClick to change the event. 


The HTML And Images export should not be used for a final production 
website for several reasons: 


+ Table-based layouts are no longer considered best practices. 


- Multiple unnecessary images are exported in order to allow the table to 
display the design. Many images are exact copies of each other, created from 
the other pages in the design. 


- All elements in the design are converted to graphics, including text. 


- Editing the resulting HTML can be problematic; for example, deleting a 
graphic slice to replace it with true HTML text can break the entire layout. 


To create a simple rollover effect, you must have two states. Each state must 
have a graphic of the same size and in the same location. A slice needs to be 
drawn over the graphic on the first state. The behavior, Add Simple Rollover, 
must be applied using the behavior handle of the slice. 


Once a behavior has been applied, you can edit its default settings by double- 
clicking on the Action in the Behaviors panel. For example, you might want 
to change the action for a behavior from onMouseOver to onClick, so your 
behavior isn’t triggered until there is direct interaction by the user. 


Lesson 13: Improving Your Workflow 


Point out that finding ways to speed up common tasks without sacrificing quality is 
important to any business. The exercises in this lesson will expose students to a few 
ways in which they can use Fireworks to expedite their workflow. 


Goals for this lesson 

In this lesson, students will learn how to do the following: 
e Use document templates 

e Batch process tasks 

e Locate and process files in Adobe Bridge 

e Add project information to a file 

e Add Photoshop Live effects 


e Customize keyboard shortcuts 


Using document templates 


Document templates give new and experienced users a leg up in the design process. 
As a new user, you can see how certain projects can be assembled, such as mobile 
applications and website designs, and even build on those templates. There are also 
some excellent jumpstart samples in the Document presets category. If you are 
teaching your students about the 960-grid design framework for CSS layouts, the 
Grid category has several prebuilt grid samples that can help students build wire- 
frames and prototypes that fit into this workflow. 


Devote time to studying these templates. There are several new ones in CS6, 
including iPad and iPhone templates, jQuery Bootstrap, Ads, and Miscellaneous 
Assets, just to name a few. The exercises focus on using the Web Banners template, 
but you may find other samples more suitable to your curriculum. 


Point out that students can even save their own templates to use at a later time or 
to share with others. 


Using prebuilt assets, students will create two web banners, one leader board, and 
one skyscraper banner. This gives student another chance to learn how to work in 
a restrictive space. 


Working with Adobe Bridge 


Point out that Bridge can be a real nerve center for almost all work done with 
the Creative Suite. You can view files, sort files, stack them into groups, apply 
keywords, and—as seen in the next exercise—launch other CS6 applications to 
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run automated commands such as batch processing. It’s an application that the 
team used very often during the creation of this book. 


However, Bridge does not come as part of the installation if Fireworks is purchased 
as a standalone product. This is mentioned in the book, but we chose to keep these 
Bridge exercises, assuming that most people will purchase the Creative Suite or at 

least Adobe Photoshop. In both of these situations, Bridge is part of the installation. 


For more information on Adobe Bridge, be sure to check out www.adobe.com. 


@ Note: We walk the students through customizing the commands used during the Batch Process. 
In the final screen for the Batch Process Wizard, the user has an option, Save Script, which would add 
the customized batch process to the Fireworks Commands menu as a custom command. In many 
cases, custom commands are created by selecting a series of steps in the History panel and choosing 
Save Steps As A Command. 


Batch processing and customizing 
using Bridge and Fireworks 


Batch processing is a powerful tool in Fireworks. Bridge makes it even more power- 
ful, because students can view files first before selecting them for batch processing. 


Call attention to the other automated Fireworks features that can be accessed 
through Bridge, such as Convert To Grayscale and Convert To Sepia Tone, both of 
which are applied using Fireworks Live Filters, so they remain completely editable. 


Although it is not discussed in the book, point out that running the Batch Process 
Wizard gives you access to any command available from the Fireworks Command 
menu, including custom commands created by the user. As long as the command 
does not rely on selecting a specific object in a file, most commands will run suc- 
cessfully from the Batch Process Wizard. 


Exporting a specific area 


The Export Area tool lets you crop and export a specific part of a design, without 
having to create slices or copy and paste artwork into a new page or document. 
When you commit to the crop, you're brought to the Image Preview window, where 
you can save the cropped area as a flattened image that can be e-mailed to a client. 
As demonstrated in the lesson, this workflow can be helpful if you want a client to 
focus on a specific area of a design. 


Although it is not mentioned in this lesson, explain that users also have options to 
send an any active page design directly to e-mail, either as a Fireworks PNG file or 
a flattened JPEG file, by choosing File > Send To E-mail. 


Future-proofing your projects 


The exercises in this part of the lesson focus on making your files as useful as 
possible to others (in terms of project information) and particularly to those who 
prefer to work in Photoshop rather than Fireworks. 


Lesson 14 takes this concept even further, discussing Fireworks’ integration with 
Dreamweaver, Edge, Muse, and InDesign. 


Adding metadata 


Explain that metadata can be added either through Bridge or by choosing File > 
File Info in Fireworks. At the very least, adding some keywords to each file worked 
on can greatly speed up searching for files at a later time. 


Using Fireworks files with Photoshop 


Chances are good that as web designers, students will use both Fireworks and 
Photoshop in their day-to-day work. As such, it’s a good idea for them to see how 
these two applications work together—or don't. 


Fireworks and Photoshop have a decent integrated working relationship. When 
moving Fireworks designs to Photoshop, students will get the best results by 
understanding Photoshop Live Effects, best practices for saving files for Photoshop, 
and Photoshop export options. Many elements can be preserved for editing 

in Photoshop. Text, hierarchical layers, layer groups, vector shapes filled with 
Photoshop Live Effects, solid color, many gradients, and masked objects are main- 
tained and supported when you save a file in PSD format from within Fireworks. 


All is not perfect though, and this exercise discusses some of the “gotchas” to be 
aware of when moving between Fireworks and Photoshop. Students will have the 
opportunity to save an existing Fireworks web page as a Photoshop file and also 
open a Photoshop file in Fireworks. 


Photoshop Live Effects were first introduced in Fireworks CS3. Nothing has 
changed in this area, but it’s worth pointing out that support for Photoshop Layer 
Styles (Live Effects in Fireworks) makes maintaining certain effects easy when a 
PSD file is opened in Fireworks. Likewise, if it is known that an original Fireworks 
design is destined to be edited in Photoshop, using Photoshop Live Effects guaran- 
tees that those effects will remain editable within Photoshop. 


Be sure to review the sidebar “Opening and importing Photoshop files“ for details 
on the Open/Import preferences. 


ADOBE FIREWORKS CS6 CLASSROOM IN A BOOK 


57 


58 


INSTRUCTOR NOTES 


Saving as a Photoshop file and customizing 
Photoshop export options 
Just as you can customize how a Photoshop file is imported or opened within 


Fireworks, you can also control the options for saving any design within Fireworks 
as a Photoshop file. 


This is an important feature because Photoshop does not recognize the enhanced 
PNG format used by Fireworks. If a Fireworks PNG file is opened in Photoshop, 
the entire design is flattened into a single bitmap image. 


Common blending modes and Live Filters 


The charts in this section also highlight the integration between Photoshop and 
Fireworks. The two applications share a good amount of common ground, and 
knowing which elements are supported in both can help students maximize this 
compatibility. 


Customizing keyboard shortcuts 


Another way to speed up workflow and save time is to use keyboard shortcuts. 

Creating a common set of keyboard shortcuts used in a variety of applications can 
make things even easier. This exercise shows how to choose a new set of keyboard 
shortcuts (Photoshop, for example) and how to create custom keyboard shortcuts. 


Questions 
The following questions are not in the student’s Classroom in a Book. 
1 Where are Photoshop Live Effects located? 
What is the equivalent to Photoshop Live Effects within Photoshop? 


2 

3 How do you convert a Fireworks design into a Photoshop file? 

4 What are the five default categories of templates available in Fireworks? 
5 


In which template folder can you find templates to help with creating web 
banner ads? 


Answers 


1 Photoshop Live Effects are located in the Live Filters menu in the Properties 
panel. 


2 Photoshop Live Effects are called layer styles in Photoshop. Although these 
effects are maintained and can be activated from within Fireworks, the 
Layer Styles panel in Photoshop is much more robust, providing many more 
creative options. 


3 Select File > Save As and choose Photoshop PSD (*psd) from the Save Copy As 
drop-down list. 


4 The five default template categories are Document Presets, Grid Systems, 
Mobile, Wireframes, and Web. 


5 Banner ad templates for both the Web and Flash can be found in the Document 
Presets folder. You can also find wireframe ad templates in the Ads.png file in 
the Wireframes folder. 


Lesson 14: Going Further 


This chapter is located on the companion disc as a PDF, along with accompanying 
lesson files. 


As the heading indicates, this lesson takes students beyond the basics. They will 
learn how to use the jQuery Mobile template and how to customize a jQuery 
design within Dreamweaver. 


Remember, Fireworks is a great program, but it—like most software out there—isn’t 
perfect. There’s always something someone might wish Fireworks would do, but 
currently doesn’t. This is where extensions come in. 


Take the time to explain to students what extensions are and that they are available 
for many Adobe applications as well as Fireworks. Many talented third-party devel- 
opers create extensions to extend the functionality of Fireworks. Often these exten- 
sions are free. The exercise on extensions walks through the process of finding and 
installing an extension, but it doesn’t recommend any specific extension to install. 
We recommend you go through this exercise first and decide if this is something you 
want your students to try. It’s very possible they won't be able to install extensions on 
school systems, but they should be able to on their own personal computers. 


Goals for this lesson 

In this lesson, students will learn how to do the following: 
e Create a theme for a jQuery Mobile site 

e Customize and edit a jQuery design in Dreamweaver 
e Find and install Fireworks extensions 


Additionally, students will get a glimpse into how Fireworks can fit into the work- 
flows of other Adobe products, such as Dreamweaver, Edge, Muse, and InDesign. 


The two main exercises walk the student through the creation, customization, and 
export of a new jQuery Mobile theme swatch, and then show them how to use the 
exported CSS and sprite sheet to customize the look of a jQuery Mobile Starter 
Page in Dreamweaver. We feel it’s important to go through the entire process, so 
students will need access to Dreamweaver to complete the exercises. 
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jQuery Mobile theme creation 


Talk about the growing popularity of mobile devices. It’s estimated that by 2013, 
mobile browsing will begin to exceed desktop-based browsing. New devices are 
coming on the market on a fast, regular basis. Tablets and smartphones are here 
to stay. 


One solution to reducing bandwidth for mobile devices is the jQuery mobile 
framework. Well supported in Dreamweaver, the jQuery Mobile Framework is 

a touch-optimized JavaScript/CSS framework that allows you to quickly build 
websites for mobile devices. Designed for smartphones and tablets, jQuery Mobile 
works on the vast majority of all modern desktop, smartphone, tablet, and e-reader 
platforms. The framework includes web-specific controls such as buttons, sliders, 
list elements, and many more. 


Optimized for mobile devices, jQuery Mobile uses very few graphics to render the 
web content. Instead, modern features such as CSS3 gradients are used for fills, and 
CSS3 border-radius markup is used to round the corners of buttons. This in itself is 
a good reason to consider using jQuery Mobile if you need to implement mobile- 
only web projects, because you are reducing download times and bandwidth 
consumption. 


The jQuery Mobile Theme command lets designers (and students) customize the 
look of web applications and sites, visually, and then export the necessary CSS and 
sprites for use within the framework itself. This saves a great deal of time, as you do 
not need to write or edit the CSS markup manually. 


Prior to the jQuery Mobile Theme command, you had to manually modify the CSS 
style sheet when you created a theme for a jQuery-based mobile website. Checking 
how your theme looked on the website was a bottleneck in the workflow as well. 
You either had to work in Live View in Dreamweaver or preview the site locally in 
browsers. Needless to say, fine-tuning your theme’s appearance could take a great 
deal of time, between modifying the code on a web page and then previewing it 

in a browser or Dreamweaver’s Live View. 


Customizing jQuery Mobile skin in Dreamweaver 


This exercise uses Dreamweaver CS6. If CS6 is not available, Dreamweaver CS5.5 
can be used, but there may be differences in the steps and the UI in general. The 
exercise makes a few basic changes, but feel free to experiment more, even by 
adding more swatch sets in the original Fireworks template before exporting 

the theme. 


You may want to consider splitting your class into groups of two, where one 
student customizes the template in Fireworks, while a partner does the work in 
Dreamweaver. Then have them swap duties. This can give them a bit of real world 
insight into the designer/developer workflow. 


Limitations 


Be ready to discuss the limitations of the Fireworks theme creation process; the 
command is not a replacement for creating a full mock-up. That process, discussed 
in Lessons 11 and 12, is still worth going through. The other “limitation” is more 
along the lines of the “reality” of designing for mobile. In accordance with the 
jQuery Mobile Framework, Fireworks does not export patterns or images (other 
than the sprites). When thinking mobile design, you want to be thinking about 
bandwidth as well. Data plans aren't free, after all. 


Everything Fireworks exports from the theme becomes CSS-generated code, except 
for the sprites, of course. This optimizes the size of the exported content. This doesn’t 
mean you can’t add more bitmaps; you just can’t use the template to do it. Use 
Fireworks to create and optimize those graphics so that you get the smallest pos- 
sible file sizes. And you will have to manually add the markup that calls on those 
new graphics in your web-authoring tool. 


Questions 

The following questions are not in the student’s Classroom in a Book. 

1 Where do you find the command to create a jQuery Mobile theme in Fireworks? 
2 When you export a jQuery Mobile theme, what is created? 

3 How many theme swatches can be created for a given theme? 
4 


What other Adobe software can make use of Fireworks in their workflows? 


Answers 


1 To create a new jQuery Mobile Theme, choose Commands > jQuery Mobile 
Theme > Create New Theme. This opens the jQuery Mobile template as an 
untitled document. The default template is stocked with the five default jQuery 
Mobile swatches, which you can either customize or use as a starting point for 
new swatches. Each swatch resides on its own page within the template. 


2 When you export your jQuery Mobile theme using Commands > jQuery Mobile 
Theme > Export Theme, five CSS files are created, one for the framework and 
four others; one CSS file for each of four sprite sheets generated by Fireworks. 
If you export using Window > Extensions > jQuery Mobile Theme In-App 
Preview, you can choose to export the current swatch from the preview, or 
the sprite images. Exporting the current swatch generates a CSS file for the 
currently active swatch and nothing else. Exporting the sprite images generates 
the sprite sheets (bitmap files) and the necessary CSS containing the framework 
classes and sprite coordinates. 
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INSTRUCTOR NOTES 


3 You can create up to 26 theme swatches per theme. Each swatch must reside in 
its own page within the template, and each page should be named using a single 
letter from a to z. Do not duplicate page names. 


4 Fireworks can be used in conjunction with workflows for InDesign and Muse 
(wireframing, prototyping, asset creation, and optimization), Dreamweaver 
(wireframing, prototyping, asset creation, optimization, CSS extraction, and 
jQuery Mobile skinning) Photoshop and Muse (asset creation and image 
optimization). 


Enjoy the book! 


I truly hope you find this latest Fireworks Classroom in a Book useful and helpful 
in your classes. As it says at the beginning of the text, this book is not meant as a 
replacement for the official documentation. Although it doesn’t include everything 
Fireworks can do, I feel I picked many of the most important aspects and work- 
flows of a program I really enjoy using. 


My editing team and I worked very hard to make the book the best it could be, but 
there’s always the chance something doesn’t work the way we expect. 


If you find yourself stuck or needing clarification on a lesson, feel free to reach out 
to me on twitter (@JimBabbage) or by e-mail (fw_ciab@jimbabbage.ca). 


Wishing you all the best in the classroom and out, 


—Jim Babbage 


